Dieser Artikel führt Sie in einige interessante Kenntnisse über den Hintergrund ein. Mit einigen sehr kleinen Einheiten und nur wenigen Codezeilen können Sie wunderbare und interessante Hintergrundeffekte erzeugen ~
Die Protagonisten dieses Artikels sind hauptsächlich:
Was ist der Größenordnungseffekt auf Hintergrundgrafiken ? Was ist mit? Schauen wir uns ein so interessantes Phänomen an:
Wir verwenden repeating-conic-gradient, um eine Grafik mit mehreren Winkelverläufen zu implementieren. Der Code ist sehr einfach, wie unten gezeigt: 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
在之前，如果我们直接写下述的过渡代码，是无法得到补间过渡动画的，只会有逐帧动画：
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
{
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
);
}
🎜30deg durch 0,1deg30deg</code oben zu ersetzen Code >, ähnlich wie dieser: 🎜rrreee🎜Was ist das? Denken Sie darüber nach, wie werden die von dieser Codezeile gezeichneten Grafiken aussehen? 🎜🎜Sehen Sie sich den Effekt an: 🎜🎜<img src="https://img.php.cn/upload/image/694/533/192/161958294362856Reines CSS, um wundervolle und interessante Hintergrundeffekte zu erzielen! !" title="161958294362856Reines CSS, um wundervolle und interessante Hintergrundeffekte zu erzielen! !" alt="2. png "/>🎜🎜Wow, unglaublich. <code>0,1 Grad ist hier sehr kritisch. Je kleiner der Winkel hier ist (vorzugsweise weniger als 1 Grad), desto kühler wird die Grafik, was wir als Auswirkung der Größenordnung auf die Hintergrundgrafik bezeichnen. 🎜🎜CodePen – Einzeiliges CSS-Muster🎜
🎜🎜OK, als nächstes wenden Sie es auf diesen Artikel an--CSS @property, das Unmögliche möglich macht Mit den eingeführten Kenntnissen von CSS @property können wir CSS @property verwenden Beobachten Sie den Prozess ihrer beiden Zustandsänderungen. 🎜🎜Einfache Änderung des Codes, der Kerncode lautet wie folgt: 🎜rrreee🎜CSS @property, siehe von 30deg bis 0,1 Im Änderungsprozess von Grad können wir grob sehen, wie sich die kleine Einheit 0,1 Grad auf die Grafik auswirkt. 🎜🎜Gleichzeitig gilt: Je kleiner das Gerät, desto detaillierter ist das Bild. Sie können es selbst ausprobieren. 🎜
🎜rrreee🎜
🎜rrreee🎜
🎜rrreee🎜🎜🎜 Hehe, ist es nicht interessant? Sie können selbst weitere interessante Grafiken ausprobieren, um den vollständigen DEMO-Code zu sehen: 🎜🎜CodePen-Demo – Magische Verlaufskunst🎜repeating-radial-gradient Es ähnelt radial-gradient() und verwendet dieselben Parameter, wiederholt jedoch die Farbe in alle Richtungen und deckt den gesamten Container ab. 🎜🎜Nehmen Sie den folgenden Code als Beispiel: Der Endpunkt einer einzelnen Zeichnung einer Grafik ist 1px, worauf es in diesem Artikel ankommt. 🎜rrreee🎜Ich habe zum Vergleich 8 Grafiken von 100px bis 0,00001px gezeichnet: 🎜
在 0.001px 到 0.0001px 这个区间段，基本上图形已经退化为粒子图形，见不到径向渐变的轮廓了，而到了 0.00001px 这个级别，居然退化为了一张纯色图片！
CodePen Demo -- 不同级别长度单位对 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+)
更多编程相关知识，请访问：编程视频！！
Das obige ist der detaillierte Inhalt vonReines CSS, um wundervolle und interessante Hintergrundeffekte zu erzielen! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
