CSS3 渐变 - 快来感受 CSS 的伟大吧(差点闪瞎我的狗眼)
在此,我们重点用到的就是 conic-gradient。conic-gradient 不是什么新鲜东西了,CSS3 出的新特性中的一种圆锥形渐变。
常用渐变方式
线性渐变(linear-gradient)和径向渐变(radial-gradient)这两个是常用的。下面是简单的小案例:
上面是我们常用的渐变方法,下面咱们来上今日重点--conic-gradient。
今日重点--conic-gradient
一个 conic-gradient(圆锥形渐变)简单的案例:
代码:
下面开始整活!!!!
看了许多的文档,发现有很多会运用到表盘中,效果入下:
代码:
是不是瞬间有了表盘的味道!!!
这里面主要用到的是径向渐变(radial-gradient)和圆锥形渐变(conic-gradient)。
思路就是先用 conic-gradient 以白色为始为终,之间用红色,橙色,草绿和墨绿以 12.5 度间隔开来.再用 radial-gradient 以中点开始渐变,白色为始,transparent 为终.做中间的白色圆点.rotate 旋转 115 度.完成上面的效果。
这里有一个 transparent,就是 rgba(0,0,0,0)。也就是全透明黑色。
我突然有一个大胆的想法!
代码:
这不就是一个光盘嘛!!或者还可以让他旋转一下!!
效果图太大放不下。。。
点击查看效果:【图片地址https://img2020.cnblogs.com/blog/2229703/202101/2229703-20210130152438779-903588020.gif】
代码:
为什么感觉有点像轮胎 emmmmm.....
把宽调整一下,你就获得一个保龄球。如果继续旋转,你就获得了一个旋转的保龄球。(这个剪辑的有点失败,可以复制代码查看效果,体验感较好)
代码:
瞎想失败,这更像是一个再犯脑残的花花 emmmmm.....
而且这为什么,老是让我想到洋葱花 emmmmm................
还有这个,老是让我联想到用来装饰用的泡花:
效果图太大放不下。。。
点击查看效果:【图片地址https://img2020.cnblogs.com/blog/2229703/202101/2229703-20210130152510335-253234760.gif】
代码:
当时把这个搞成满屏,挺震撼的。同时也闪瞎了我的狗眼。
友情提示,不要看太久,会想吐。我已经在厕所了!!
版权声明: 本文为 InfoQ 作者【肥晨】的原创文章。
原文链接:【http://xie.infoq.cn/article/0766b80d3c979c35be647e6d9】。文章转载请联系作者。
评论