css3实现圆锥渐变conic-gradient效果


Posted in HTML / CSS onFebruary 12, 2020

语法:

background-image: conic-gradient(from angle at position, start-color, ..., last-color )

第一个参数:

from angle :起始的角度,可选,默认为从上到下

position :圆锥锥点的位置

第二个参数:

start-color :定义开始颜色

stop-color :定义结束颜色

1.第一个参数

同样的,第一个参数可以为空,默认的角度为 0deg ,锥心为形状的 中心点 。例如:

background-image: conic-gradient(#69f, #fd44ff);

css3实现圆锥渐变conic-gradient效果

我们可以改变起始的角度,如:

background-image: conic-gradient(from -90deg, #69f, #fd44ff);

css3实现圆锥渐变conic-gradient效果

改变锥心位置:

background-image: conic-gradient(from -90deg at 80px 120px, #69f, #fd44ff)

css3实现圆锥渐变conic-gradient效果

2. 第二个参数

与线性、径向渐变一样,可以设颜色及渐变的起始位置。位置接受的参数有百分比和角度。例如:

background-image: conic-gradient(#69f 10%, #fd44ff 10%);

以上代码等同于:

background-image: conic-gradient(#69f 36deg, #fd44ff 36deg);

显示效果如下:

css3实现圆锥渐变conic-gradient效果

3. 重复圆锥渐变

与线性、径向渐变一样,圆锥渐变也有重复的属性。

background-image: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);

效果如图:

css3实现圆锥渐变conic-gradient效果

这个效果图是不是有一点点熟悉的感觉呢?

我们来把它设置成圆形,加一个按钮,就是一个抽奖圆盘了。

效果如下:

css3实现圆锥渐变conic-gradient效果

地址: https://codepen.io/jianxiujiucan/pen/bGddbez

我们可以用圆锥做各式各样的loading效果:

css3实现圆锥渐变conic-gradient效果

地址: https://codepen.io/jianxiujiucan/pen/bGdGyKN

第二个loading请自己研究一下并写练习哦~

我们可以用渐变来绘制各式各样的效果啦。

总结

以上所述是小编给大家介绍的css3实现圆锥渐变conic-gradient效果,希望对大家有所帮助!

HTML / CSS 相关文章推荐
css3中的calc函数浅析
Jul 10 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 #HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 #HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 #HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 #HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 #HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 #HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 #HTML / CSS
You might like
dedecms系统常用术语汇总
2007/04/03 PHP
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
php解决安全问题的方法实例
2019/09/19 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
window.open()弹出居中的窗口
2007/02/01 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
javascript数组的扩展实现代码集合
2008/06/01 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
python绘制雪景图
2019/12/16 Python
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
秋季校运动会广播稿
2014/02/23 职场文书
六一亲子活动总结
2014/07/01 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers