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

  发布时间:2020-02-12 14:55:57   作者:佚名   我要评论
这篇文章主要介绍了css3圆锥渐变conic-gradient效果,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

语法:

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请自己研究一下并写练习哦~

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

总结

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

相关文章

  • css3针对移动端卡顿问题的解决(动画性能优化)

    这篇文章主要介绍了css3针对移动端卡顿问题的解决(动画性能优化),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小
    2020-02-14
  • CSS3实现文字描边的2种方法(小结)

    这篇文章主要介绍了CSS3实现文字描边的2种方法(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2020-02-14
  • css3实现圆锥渐变conic-gradient效果

    这篇文章主要介绍了css3圆锥渐变conic-gradient效果,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-12
  • css3翻牌翻数字的示例代码

    这篇文章主要介绍了css3翻牌翻数字的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-07
  • css3使用animation属性实现炫酷效果(推荐)

    这篇文章主要介绍了css3使用animation属性实现炫酷效果(推荐),非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-04
  • CSS3中新增的对文本和字体的设置

    这篇文章主要介绍了CSS3中新增的对文本和字体的设置,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-03
  • CSS3动画特效在活动页中的应用

    这篇文章主要介绍了CSS3动画特效在活动页中的应用,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-21
  • 如何用border-image实现文字气泡边框的示例代码

    这篇文章主要介绍了如何用border-image实现文字气泡边框的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着
    2020-01-21
  • CSS3实现网站商品展示效果图

    这篇文章主要介绍了CSS3实现网站商品展示效果图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
    2020-01-18
  • 2分钟教你实现环形/扇形菜单(基础版)

    这篇文章主要介绍了2分钟教你实现环形/扇形菜单(基础版),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2020-01-15

最新评论