CSS 還能這樣玩？奇思妙想漸變的藝術

在以前的這篇文章 -- 一行 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 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。