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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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
php学习之function的用法
2012/07/14 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
php实现头像上传预览功能
2017/04/27 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
Javascript this指针
2009/07/30 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
Python的一些用法分享
2012/10/07 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python数据归一化及三种方法详解
2019/08/06 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
python合并多个excel文件的示例
2020/09/23 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
社区活动策划方案
2014/08/21 职场文书
银行授权委托书格式
2014/10/10 职场文书
法律意见书范文
2015/05/20 职场文书
服装店员工管理制度
2015/08/07 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
Django框架中视图的用法
2022/06/10 Python