CSS 還能這樣玩？奇思妙想漸變的藝術(shù)
我要評論在之前的這篇文章 -- 一行 CSS 代碼的魅力 中，我們介紹了一種使用一行 CSS 代碼就能夠生成的一種美妙（也許奇怪更合適）的背景。
本文，將繼續(xù)介紹背景的一些有意思的知識，利用一些極小的單位，只需要短短幾行代碼，就能夠產(chǎn)生出美妙而又有意思的背景效果~
數(shù)量級對背景圖形的影響
本文的主角主要是：
- 多重徑向漸變(repeating-radial-gradient)
- 多重角向漸變(repeating-conic-gradient)
什么是數(shù)量級對背景圖形呢？我們來看這樣一種有意思的現(xiàn)象：
我們使用 repeating-conic-gradient 多重角向漸變實現(xiàn)一個圖形，代碼非常的簡單，示意如下：
<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 非常關(guān)鍵，這里的角度越?。ㄐ∮?1deg 為佳），圖形越酷炫，也就是我們說的數(shù)量級對背景圖形的影響。
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 不支持對這種復(fù)雜的漸變進(jìn)行直接的過渡動畫：
OK，接下來，運用在這篇文章 --CSS @property，讓不可能變可能 介紹的 CSS @property 的知識，我們可以利用 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ù)量級單位對這個圖形的影響，卻歪打正著得到了一個看著很魔幻的過渡動畫效果。強烈建議你點進(jìn) DEMO 感受下變換的效果：
CodePen -- repeating-conic-gradient CSS Pattern Transition（Only Chrome 85+）
通過 CSS @property 實現(xiàn)的補間過渡動畫，看到從 30deg 到 0.1deg 的變化過程，我們大致可以看出小單位 0.1deg 是如何去影響圖形的。
同時，這個單位越小，圖片的細(xì)節(jié)越多，具體的可以自己再嘗試。
多重徑向漸變 & 多重角向漸變 配合小單位實現(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ù)，但是它會在所有方向上重復(fù)顏色，以覆蓋其整個容器。
以下述代碼為例子，其中的單次繪制圖形的終止點 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 這個區(qū)間段，基本上圖形已經(jīng)退化為粒子圖形，見不到徑向漸變的輪廓了，而到了 0.00001px 這個級別，居然退化為了一張純色圖片！
CodePen Demo -- 不同級別長度單位對 repeating-radial-gradient 圖形的影響
使用 repeating-radial-gradient 實現(xiàn)電視雪花噪聲動畫
在上述 DEMO 中，我們發(fā)現(xiàn)，當(dāng)在 0.001px 到 0.0001px 這個區(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 這個參數(shù)， 利用幾幀不同的動畫，我們就可以得到電視雪花噪聲的動畫了。
啊哈，非常的有意思，完整的源碼你可以戳這里：
Copepen Demo -- PURE CSS TV NOISE EFFECT (Only Chrome 85+)
最后
幾行背景代碼能干什么？肯定不止這些，當(dāng)然，這不就是 CSS 的樂趣么。想 Get 到最有意思的 CSS 資訊，千萬不要錯過我的 iCSS 公眾號 -- iCSS前端趣聞
好了，本文到此結(jié)束，希望對你有幫助 😃
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ，持續(xù)更新，歡迎點個 star 訂閱收藏。
到此這篇關(guān)于CSS 還能這樣玩？奇思妙想漸變的藝術(shù)的文章就介紹到這了,更多相關(guān)css漸變內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個非常基礎(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實際項目中使用它們2025-04-07- will-change 是一個 CSS 屬性，用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式；通過數(shù)組語法,可以同時綁定多個類名或樣式,此外2025-02-26
