CSS 还能这样玩？奇思妙想渐变的艺术 (2)

以下述代码为例子，其中的单次绘制图形的终止点 1px，也就是本文的重点，它究竟可以小到什么程度呢？

:root { --length: 1px } { background-image: repeating-radial-gradient( circle at 17% 32%, rgb(4, 4, 0), rgb(52, 72, 197), rgb(115, 252, 224), rgb(116, 71, 5), rgb(223, 46, 169), rgb(0, 160, 56), rgb(234, 255, 0) var(--length) ); }

我从 100px 到 0.00001px 绘制了 8 张图形，作为比较：

在 0.001px 到 0.0001px 这个区间段，基本上图形已经退化为粒子图形，见不到径向渐变的轮廓了，而到了 0.00001px 这个级别，居然退化为了一张纯色图片！

CodePen Demo -- 不同级别长度单位对 repeating-radial-gradient 图形的影响

使用 repeating-radial-gradient 实现电视雪花噪声动画

在上述 DEMO 中，我们发现，当在 0.001px 到 0.0001px 这个区间段，repeating-radial-gradient 基本退化为了粒子图形：

{ background-image: repeating-radial-gradient( circle at 17% 32%, rgb(4, 4, 0), rgb(52, 72, 197), rgb(115, 252, 224), rgb(116, 71, 5), rgb(223, 46, 169), rgb(0, 160, 56), rgb(234, 255, 0) 0.0008px ); }

这不是非常类似电视雪花屏的效果么？微调 0.0008px 这个参数， 利用几帧不同的动画，我们就可以得到电视雪花噪声的动画了。

啊哈，非常的有意思，完整的源码你可以戳这里：

Copepen Demo -- PURE CSS TV NOISE EFFECT (Only Chrome 85+)

最后

几行背景代码能干什么？肯定不止这些，当然，这不就是 CSS 的乐趣么。想 Get 到最有意思的 CSS 资讯，千万不要错过我的 iCSS 公众号 -- iCSS前端趣闻