@function randomNum($max, $min: 0, $u: 1) { @return ($min + random($max)) * $u; } @function randomConicGradient() { $n: random(30) + 10; $list: (); @for $i from 0 to $n { $list: $list, rgb(randomNum(255), randomNum(255), randomNum(255)); } @return conic-gradient($list, nth($list, 1)); } div { width: 100vw; height: 100vh; background: randomConicGradient(); }

简单解释下上面的 SCSS 代码，

OK，刷新页面，得到如下效果图：

卧槽，很酷炫，bling bling 闪闪发光的感觉啊！而且是随机生成的各种颜色，所以每次刷新都有新体验有木有！！

还没完，接下来给它加上旋转动画，蹬蹬蹬，旋转起来大概是这样：

由于 GIF 图大小的限制，只看 GIF 没办法感受到全屏下那种科幻眩晕的感觉，墙裂建议你戳进来看看：

CodePen Demo -- conic-gradient Animation

到这里我还是不是很满足。想到了之前的 mix-blend-mode 属性。

想了解 mix-blend-mode 这个属性，可以戳我看看：不可思议的颜色混合模式 mix-blend-mode

如果多个圆锥渐变层级叠加，并且运用上 mix-blend-mode 会发生什么？好可怕的想法...

最终捣鼓出这种非常科幻的效果：

上图使用了 2 个半透明的圆锥渐变，相对反向进行旋转，并且在底层使用 mix-blend-mode: overlay 叠加了一个白黑径向渐变图层。可以看看代码及效果：

CodePen Demo -- conic-gradient Animation

上面的例子酷炫归酷炫，但是在项目中实用性不强。那么圆锥渐变是否能用于业务中的？答案是肯定的。

看看下面这个图，芝麻信用分背景渐变颜色条，不使用 JS，纯 CSS 借助 conic-gradient 如何画出来。

假设我们的结构如下：

<div> <div></div> </div>

CSS：