CSS3圆锥渐变 conic-gradient

CS
语法:

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); 

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

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

改变锥心位置:

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

2. 第二个参数

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

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

以上代码等同于:

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

显示效果如下:


3. 重复圆锥渐变

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

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

效果如图:


这个效果图是不是有一点点熟悉的感觉呢?
我们来把它设置成圆形,加一个按钮,就是一个抽奖圆盘了。
效果如下:






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

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


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

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

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



https://codepen.io/jianxiujiucan/pen/gOppOdP

原文链接:segmentfault.com

上一篇:@beisen-platform/ethos
下一篇:@molejs/mole-core

相关推荐

  • 选择某类的最后一个元素——CSS3伪类选择器走过的坑

    众所周知,在CSS3规范中,添加了许多了伪类选择器,这些选择器代替了不少JS的工作,让我们从以前通过获取DOM节点进而进行样式修改的操作,变得更加便捷高效。 然而我在近期开发使用的过程中,遇到了不少坑...

    4 个月前
  • 进入 CSS3 动画

    我最近有机会深入研究一些CSS3动画。 我使用了像animate.css这样的库,用javascript完成了动画,但从未做过任何自定义的CSS3工作 原文(https://codeguide.cn/...

    1 年前
  • 超详细教程:纯CSS3写一个摇头晃脑的小哥

    1.制作背景 1.1作为一个刚刚打算要入行的准前端,并没有什么基础,暂时是按照网上的前辈们的指导,按部就班地学习中。首先就要学习CSS3的使用。前期,做过几个比较简单的网站首页的仿制,现在想要试试...

    3 年前
  • 认识“新”朋友—conic-gradient

    曾经,我们需要用图片来完成很多视觉效果,代码难以实现的形状、色彩等等,还好后来有了CSS3,很多新的属性可以实现以前无法想象的元素,帮我们节省了大量的开发成本和网络传输成本。

    3 个月前
  • 背景&边框之魔法武器CSS3

    简述 在页面的构建过程中,离不开背景、边框,背景和边框就是最基本的设置了 UI为了实现一些特定的视觉效果,单一的纯色背景已经不能满足现有的效果了。越来越多的图片背景开始盛行。

    2 年前
  • 纯css3漂亮的checkbox和radio美化效果插件Pretty.css插件

    插件介绍 pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用,对原生的checkbox和radio进行美化,还可以制作按...

    1 年前
  • 纯css3实现二维码扫描特效

    先看效果: image.png(/public/upload/d8689daebae0f323d1eba4dd459abc23) 第一步,实现网格背景: 第二部实现扫码线以及渐变背景特...

    4 个月前
  • 纯 CSS3 实现漂亮的 input 输入框动画样式库-Text input love

    分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符...

    2 年前
  • 神奇的CSS3混合模式

    对于前端开发人员应该都很熟悉Photoshop的图层混合模式,就是几个图层按不同的模式进行混合,实现不同的图像效果。但是当我们前端同学在切这些效果图的时候,基本上就是一刀切的,即使是文字,当字体很炫...

    2 年前
  • 用css动态实现圆环百分比分配——初探css3动画

    最近的小程序项目有个设计图要求做一个圆环,两种颜色分配,分别代表可用金额和冻结金额。要是就直接这么显示,感觉好像挺没水平??于是我决定做个动态! 在mdn把新特性 都看了一遍,不禁感叹css牛逼!这...

    2 年前

官方社区

扫码加入 JavaScript 社区