在之前的这篇文章 -- 一行 CSS 代码的魅力 中，咱们介绍了一种应用一行 CSS 代码就可能生成的一种美好（兴许奇怪更适合）的背景。
本文，将持续介绍背景的一些有意思的常识，利用一些极小的单位，只须要短短几行代码，就可能产生出美好而又有意思的背景成果~
数量级对背景图形的影响
本文的配角次要是：
- 多重径向突变(repeating-radial-gradient)
- 多重角向突变(repeating-conic-gradient)
什么是数量级对背景图形呢？咱们来看这样一种有意思的景象：
咱们应用 repeating-conic-gradient 多重角向突变实现一个图形，代码十分的简略，示意如下：
<div></div>div { width: 100vw; height: 100vh; background: repeating-conic-gradient(#fff, #000, #fff 30deg);}将 30deg 替换为 0.1deg
而后，咱们用一个十分小的值去替换上述代码中的 30deg，相似于这样：
{ background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);}这是什么玩意？脑补一下，这行代码绘制进去的图形会是什么样子？
看看成果：
Wow，不堪设想。这里 0.1deg 十分要害，这里的角度越小（小于 1deg 为佳），图形越酷炫，也就是咱们说的数量级对背景图形的影响。
CodePen -- One Line CSS Pattern
借助 CSS @property 察看变动过程
在之前，如果咱们间接写下述的过渡代码，是无奈失去补间过渡动画的，只会有逐帧动画：
div{ background: repeating-conic-gradient(#fff, #000, #fff 0.1deg); transition: background 1s;}div:hover { background: repeating-conic-gradient(#fff, #000, #fff 30deg);}只能失去这样的成果，起因在于 CSS 不反对对这种简单的突变进行间接的过渡动画：
OK，接下来，使用在这篇文章 --CSS @property，让不可能变可能 介绍的 CSS @property 的常识，咱们能够利用 CSS @property 察看一下它们两种状态变动的过程。
简略革新下代码，外围代码如下：
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0.1deg;}div{ background: repeating-conic-gradient(#fff, #000, #fff var(--angle)); transition: --angle 2s;}html:hover { --angle: 30deg;}Wow，本着寻找不同数量级单位对这个图形的影响，却歪打正着失去了一个看着很魔幻的过渡动画成果。强烈建议你点进 DEMO 感触下变换的成果：
CodePen -- repeating-conic-gradient CSS Pattern Transition（Only Chrome 85+）
通过 CSS @property 实现的补间过渡动画，看到从 30deg 到 0.1deg 的变动过程，咱们大抵能够看出小单位 0.1deg 是如何去影响图形的。
同时，这个单位越小，图片的细节越多，具体的能够本人再尝试。
多重径向突变 & 多重角向突变 配合小单位实现有意思的背景
利用上述的一些小技巧，咱们利用多重径向突变(repeating-radial-gradient)、多重角向突变(repeating-conic-gradient)就能够生成一些十分有意思的背景图片。
简略列举一些：
div { background-image: repeating-radial-gradient( circle at center center, rgb(241, 43, 239), rgb(239, 246, 244) 3px );}div { background-image: repeating-radial-gradient( circle at 15% 30%, 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) 2px );}div { background-image: repeating-radial-gradient( circle at center center, rgb(81, 9, 72), rgb(72, 90, 223), rgb(80, 0, 34), rgb(34, 134, 255), rgb(65, 217, 176), rgb(241, 15, 15), rgb(148, 213, 118) 0.1px );}div { background-image: repeating-radial-gradient( ellipse at center center, rgb(75, 154, 242), rgb(64, 135, 228), rgb(54, 117, 214), rgb(43, 98, 200), rgb(33, 79, 185), rgb(22, 60, 171), rgb(12, 42, 157), rgb(1, 23, 143) 0.01px );}嘿嘿，是不是别有一番意思，更多有意思的图形能够本人尝试尝试，残缺的 DEMO 代码，你能够戳进这里看看：
CodePen Demo -- Magic Gradient Art
最小能够小到什么水平？
repeating-radial-gradient 它相似于 radial-gradient() 并且采纳雷同的参数，然而它会在所有方向上反复色彩，以笼罩其整个容器。
以下述代码为例子，其中的单次绘制图形的终止点 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 公众号
好了，本文到此结束，心愿对你有帮忙 :)
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。