写点什么

CSS3 渐变 - 快来感受 CSS 的伟大吧(差点闪瞎我的狗眼)

作者:肥晨
  • 2022-11-01
    江苏
  • 本文字数:2155 字

    阅读完需:约 7 分钟

在此,我们重点用到的就是 conic-gradient。conic-gradient 不是什么新鲜东西了,CSS3 出的新特性中的一种圆锥形渐变。

常用渐变方式

  线性渐变(linear-gradient)径向渐变(radial-gradient)这两个是常用的。下面是简单的小案例:


    background-image: linear-gradient(rgba(255, 0, 0, 1), rgba(255, 255, 0, 1), rgba(0, 0, 255, 1));
复制代码



    background-image: linear-gradient(135deg, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 95%, rgba(255, 0, 0, 1) 95%), linear-gradient(45deg, rgba(0, 0, 0, 1) 5%, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 1) 95%, rgba(255, 0, 0, 1) 95%);
复制代码



    background-image: radial-gradient(rgba(255, 0, 0, 1), rgba(0, 128, 0, 1), rgba(0, 0, 255, 1));
复制代码

上面是我们常用的渐变方法,下面咱们来上今日重点--conic-gradient。

今日重点--conic-gradient

一个 conic-gradient(圆锥形渐变)简单的案例:



 代码:

<div style="width: 200px;
height: 200px;
background-image: conic-gradient(red, orange, yellow, green, teal, blue, purple); text-align: center;"
></div>
复制代码

下面开始整活!!!!

看了许多的文档,发现有很多会运用到表盘中,效果入下:



 代码:

<div style="width: 200px;
 height: 200px;
 background-image: radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),
conic-gradient(#f1462c 0 12.5%, #fba73e 0 25%, #e0fa4e 0 37.5%, #12dd7e 0 50%, #0a6e3f 0 62.5%, #fff 0 100%);
 border-radius: 50%;
 transform: rotate(-115deg);"
>&nbsp;</div>
</div>
复制代码

是不是瞬间有了表盘的味道!!!

这里面主要用到的是径向渐变(radial-gradient)圆锥形渐变(conic-gradient)。

思路就是先用 conic-gradient 以白色为始为终,之间用红色,橙色,草绿和墨绿以 12.5 度间隔开来.再用 radial-gradient 以中点开始渐变,白色为始,transparent 为终.做中间的白色圆点.rotate 旋转 115 度.完成上面的效果。

这里有一个 transparent,就是 rgba(0,0,0,0)。也就是全透明黑色。

我突然有一个大胆的想法!

  代码:

<div style="width: 200px;
height: 200px;
background-image: radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),                               conic-gradient(#fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f, #fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f,#fff);
border-radius: 50%;
transform: rotate(-115deg);"
>&nbsp;</div>
复制代码

 


 这不就是一个光盘嘛!!或者还可以让他旋转一下!!


效果图太大放不下。。。

点击查看效果:【图片地址https://img2020.cnblogs.com/blog/2229703/202101/2229703-20210130152438779-903588020.gif


 代码:

<div style="width: 200px;
height: 200px;
background-image: radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),                               conic-gradient(#fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f, #fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f,#fff);
border-radius: 50%;
animation: divGradient 0.1s infinite;">&nbsp;</div><style>@keyframes divGradient {from {transform:rotate(0deg);}
to {transform:rotate(180deg);}}</style>
复制代码


为什么感觉有点像轮胎 emmmmm.....

把宽调整一下,你就获得一个保龄球。如果继续旋转,你就获得了一个旋转的保龄球。(这个剪辑的有点失败,可以复制代码查看效果,体验感较好)

 


 代码:

<div style="width: 50px;
height: 200px;
background-image: radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),                                conic-gradient(#fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f, #fff,#f1462c, #fba73e, #e0fa4e, #12dd7e, #0a6e3f,#fff);
border-radius: 50%; animation: divGradient2 0.1s infinite; margin-left: 200px;"
>&nbsp;</div><style>@keyframes divGradient2 {from {transform:rotate(0deg);}
to {transform:rotate(180deg);}}</style>
复制代码

瞎想失败,这更像是一个再犯脑残的花花   emmmmm.....

而且这为什么,老是让我想到洋葱花 emmmmm................



还有这个,老是让我联想到用来装饰用的泡花:


效果图太大放不下。。。

点击查看效果:【图片地址https://img2020.cnblogs.com/blog/2229703/202101/2229703-20210130152510335-253234760.gif


 代码:

 <div style="width: 200px;
height: 200px;
background-image: conic-gradient(#fff,#ccc, #666, #000, #666, #ccc, #fff,#ccc, #666, #000, #666, #ccc, #fff,#ccc, #666, #000, #666, #ccc, #fff);
border-radius: 50%;
animation: divGradient2 0.1s infinite;
">&nbsp;</div>
<style>@keyframes divGradient2 {from {transform:rotate(0deg);}
to {transform:rotate(180deg);}}</style>
复制代码

当时把这个搞成满屏,挺震撼的。同时也闪瞎了我的狗眼。



友情提示,不要看太久,会想吐。我已经在厕所了!!

发布于: 22 小时前阅读数: 6
用户头像

肥晨

关注

还未添加个人签名 2021-04-15 加入

平台:InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者 领域:前端 公众号:农民工前端

评论

发布
暂无评论
CSS3渐变-快来感受CSS的伟大吧(差点闪瞎我的狗眼)_11月月更_肥晨_InfoQ写作社区