CSS如何實(shí)現(xiàn)背景效果

這篇文章主要介紹了CSS如何實(shí)現(xiàn)背景效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

數(shù)量級對背景圖形的影響

本文的主角主要是：

• 多重徑向漸變(repeating-radial-gradient)

• 多重角向漸變(repeating-conic-gradient)

什么是數(shù)量級對背景圖形呢？我們來看這樣一種有意思的現(xiàn)象：

我們使用 repeating-conic-gradient 多重角向漸變實(shí)現(xiàn)一個(gè)圖形，代碼非常的簡單，示意如下：

<div></div>

div {
    width: 100vw;
    height: 100vh;
    background: repeating-conic-gradient(#fff, #000, #fff 30deg);
}

將 30deg 替換為 0.1deg

然后，我們用一個(gè)非常小的值去替換上述代碼中的 30deg，類似于這樣：

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

這是什么玩意？腦補(bǔ)一下，這行代碼繪制出來的圖形會(huì)是什么樣子？

看看效果：

Wow，不可思議。這里 0.1deg 非常關(guān)鍵，這里的角度越?。ㄐ∮?1deg 為佳），圖形越酷炫，也就是我們說的數(shù)量級對背景圖形的影響。

CodePen -- One Line CSS Pattern

借助 CSS @property 觀察變化過程

在之前，如果我們直接寫下述的過渡代碼，是無法得到補(bǔ)間過渡動(dòng)畫的，只會(huì)有逐幀動(dòng)畫：

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

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

只能得到這樣的效果，原因在于 CSS 不支持對這種復(fù)雜的漸變進(jìn)行直接的過渡動(dòng)畫：

OK，接下來，運(yùn)用在這篇文章 --CSS @property，讓不可能變可能 介紹的 CSS @property 的知識(shí)，我們可以利用 CSS @property 觀察一下它們兩種狀態(tài)變化的過程。

簡單改造下代碼，核心代碼如下：

@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，本著尋找不同數(shù)量級單位對這個(gè)圖形的影響，卻歪打正著得到了一個(gè)看著很魔幻的過渡動(dòng)畫效果。強(qiáng)烈建議你點(diǎn)進(jìn) DEMO 感受下變換的效果：

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

通過 CSS @property  實(shí)現(xiàn)的補(bǔ)間過渡動(dòng)畫，看到從 30deg 到 0.1deg 的變化過程，我們大致可以看出小單位 0.1deg 是如何去影響圖形的。

同時(shí)，這個(gè)單位越小，圖片的細(xì)節(jié)越多，具體的可以自己再嘗試。

多重徑向漸變 &  多重角向漸變 配合小單位實(shí)現(xiàn)有意思的背景

利用上述的一些小技巧，我們利用多重徑向漸變(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 代碼，你可以戳進(jìn)這里看看：

CodePen Demo -- Magic Gradient Art

最小可以小到什么程度？

repeating-radial-gradient 它類似于 radial-gradient() 并且采用相同的參數(shù)，但是它會(huì)在所有方向上重復(fù)顏色，以覆蓋其整個(gè)容器。

以下述代碼為例子，其中的單次繪制圖形的終止點(diǎn) 1px，也就是本文的重點(diǎn)，它究竟可以小到什么程度呢？

: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 這個(gè)區(qū)間段，基本上圖形已經(jīng)退化為粒子圖形，見不到徑向漸變的輪廓了，而到了 0.00001px 這個(gè)級別，居然退化為了一張純色圖片！

CodePen Demo -- 不同級別長度單位對 repeating-radial-gradient 圖形的影響

使用 repeating-radial-gradient 實(shí)現(xiàn)電視雪花噪聲動(dòng)畫

在上述 DEMO 中，我們發(fā)現(xiàn)，當(dāng)在 0.001px 到 0.0001px 這個(gè)區(qū)間段，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
    );
}

這不是非常類似電視雪花屏的效果么？微調(diào) 0.0008px 這個(gè)參數(shù)， 利用幾幀不同的動(dòng)畫，我們就可以得到電視雪花噪聲的動(dòng)畫了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS如何實(shí)現(xiàn)背景效果”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!