您還記得沒有信號(hào)的舊電視上的靜電噪音嗎？或者當(dāng)信號(hào)不好，畫面失真時(shí)？如果電視信號(hào)的概念早于您，這里有一張 GIF 可以準(zhǔn)確地表達(dá)我的意思。

我將在這里做的是一種 CSS 實(shí)驗(yàn)，以探索一些利用漸變錯(cuò)誤的技巧。您可以在業(yè)余項(xiàng)目中使用它來獲得樂趣，但使用 SVG 更簡(jiǎn)潔，更適合實(shí)際項(xiàng)目。此外，效果在不同瀏覽器中表現(xiàn)不同，因此如果您要查看這些內(nèi)容，最好在 Chrome、Edge 或 Firefox 中查看它們。

如您所見，第二個(gè)圓圈比第一個(gè)圓圈渲染得更好，因?yàn)?.5%漸變中的兩種顏色之間存在微小差異 ( )，而不是像第一個(gè)圓圈那樣使用整數(shù)值的直接硬色標(biāo)。
再看一下，這次使用conic-gradient結(jié)果更明顯的地方：

在制作這些演示時(shí)，一個(gè)有趣的想法讓我印象深刻。與其一直修復(fù)失真，不如嘗試反其道而行之？我不知道會(huì)發(fā)生什么，但這是一個(gè)有趣的驚喜！我采用了圓錐漸變值并開始降低它們，使糟糕的抗鋸齒效果看起來更糟。

你看到最后一個(gè)有多糟糕嗎？這是一種在中間炒，沒有什么是順利的。讓我們用較小的值讓它全屏顯示：


我想你知道這是怎么回事。當(dāng)我們對(duì)漸變中的硬色停止使用非常小的十進(jìn)制值時(shí)，我們會(huì)得到一種奇怪的扭曲視覺效果。我們的噪音誕生了！
我們離我們想要的顆粒狀噪聲還很遠(yuǎn)，因?yàn)槲覀內(nèi)匀豢梢钥吹綄?shí)際的錐形梯度。但是我們可以將這些值減小到非常非常小的值——比如0.0001%——突然之間就沒有梯度了，只有純粹的顆粒感：
我們有一個(gè)噪音效果，它只需要一個(gè) CSS 漸變。
我們可以通過在調(diào)整其位置的同時(shí)使梯度的大小非常大來增加隨機(jī)性：
漸變應(yīng)用于固定3000px正方形并放置在60% 60%坐標(biāo)處。在這種情況下我們很難注意到它的中心。徑向漸變也可以這樣做：
為了讓事情變得更加隨機(jī)（并且更接近真實(shí)的噪聲效果），我們可以結(jié)合兩個(gè)梯度并使用background-blend-mode來平滑事情：
我們的噪音效果是完美的！即使我們仔細(xì)觀察每個(gè)示例，也沒有任何梯度的痕跡，而是美麗的顆粒狀靜態(tài)噪聲。我們剛剛將那個(gè)抗鋸齒錯(cuò)誤變成了一個(gè)巧妙的功能！