首頁 >web前端 >css教學 >純CSS實現美妙而有意思的背景效果！！

純CSS實現美妙而有意思的背景效果！！

青灯夜游轉載: 2021-04-28 12:40:522766瀏覽

純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);
}

純CSS實現美妙而有意思的背景效果！！

將`30deg` 替換為`0.1deg`

然後，我們用一個非常小的值去替換上述程式碼中的30deg，類似這樣：

{
    background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}

這是什麼玩意？腦補一下，這行程式碼繪製出來的圖形會是什麼樣子？

看看效果：

純CSS實現美妙而有意思的背景效果！！

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 不支援對這種複雜的漸變進行直接的過渡動畫：

純CSS實現美妙而有意思的背景效果！！

OK，接下來，運用在這篇文章--CSS @property，讓不可能改變可能介紹的CSS @property 的知識，我們可以利用CSS @property 來觀察它們兩種狀態變化的過程。

簡單改造下程式碼，核心程式碼如下：

@property --angle {
  syntax: &#39;<angle>&#39;;
  inherits: false;
  initial-value: 0.1deg;
}
div{
    background: repeating-conic-gradient(#fff, #000, #fff var(--angle));
    transition: --angle 2s;
}
html:hover {
    --angle: 30deg;
}

純CSS實現美妙而有意思的背景效果！！

#Wow，本著尋找不同數量級單位對這個圖形的影響，卻歪打正著得到了一個看著很魔幻的過渡動畫效果。強烈建議你點進DEMO 感受下變換的效果：

CodePen -- repeating-conic-gradient CSS Pattern Transition（Only Chrome 85 ）

透過CSS @property 實現的補間過渡動畫，看到從30deg 到0.1deg 的變化過程，我們大致可以看出小單位0.1 deg 是如何去影響圖形的。

同時，這個單位越小，圖片的細節越多，具體的可以自己再試一次。

多重徑向漸層& 多重角向漸層配合小單位實現有趣的背景

利用上述的一些小技巧，我們利用多重徑向漸層(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
    );
}

純CSS實現美妙而有意思的背景效果！！

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
    );
}

純CSS實現美妙而有意思的背景效果！！

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
    );
}

純CSS實現美妙而有意思的背景效果！！

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
    );
}

純CSS實現美妙而有意思的背景效果！！

#嘿嘿，是不是別有一番意思，更多有意思的圖形可以自己嘗試嘗試，完整的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 張圖形，作為比較：

9-純CSS實現美妙而有意思的背景效果！！

在 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
    );
}

純CSS實現美妙而有意思的背景效果！！