服務熱線 400-660-8066
網(wǎng)站建設
服務熱線 400-660-8066
網(wǎng)站建設
您還記得沒有信號的舊電視上的靜電噪音嗎？或者當信號不好，畫面失真時？如果電視信號的概念早于您，這里有一張GIF可以準確地表達我的意思。我將在這里做的是一種CSS實驗，以探索一些利用漸變錯誤的技巧。您可以在業(yè)余項目中使用它來獲得樂趣，但使用SVG更簡潔，更適合實際項目。此外，效果在不同瀏覽器中表現(xiàn)不同，因此如果您要查看這些內(nèi)容，最好在Chrome、Edge或Firefox中查看它們。如您所見，第二個圓圈比第一個圓圈渲染得更好，因為0.5%漸變中的兩種顏色之間存在微小差異()，而不是像第一個圓圈那樣使用整數(shù)值的直接硬色標。
再看一下，這次使用conic-gradient結(jié)果更明顯的地方：在制作這些演示時，一個有趣的想法讓我印象深刻。與其一直修復失真，不如嘗試反其道而行之？我不知道會發(fā)生什么，但這是一個有趣的驚喜！我采用了圓錐漸變值并開始降低它們，使糟糕的抗鋸齒效果看起來更糟。你看到最后一個有多糟糕嗎？這是一種在中間炒，沒有什么是順利的。讓我們用較小的值讓它全屏顯示：
我想你知道這是怎么回事。當我們對漸變中的硬色停止使用非常小的十進制值時，我們會得到一種奇怪的扭曲視覺效果。我們的噪音誕生了！
我們離我們想要的顆粒狀噪聲還很遠，因為我們?nèi)匀豢梢钥吹綄嶋H的錐形梯度。但是我們可以將這些值減小到非常非常小的值比如0.0001%突然之間就沒有梯度了，只有純粹的顆粒感：
我們有一個噪音效果，它只需要一個CSS漸變。
我們可以通過在調(diào)整其位置的同時使梯度的大小非常大來增加隨機性：
漸變應用于固定3000px正方形并放置在60%60%坐標處。在這種情況下我們很難注意到它的中心。徑向漸變也可以這樣做：
為了讓事情變得更加隨機（并且更接近真實的噪聲效果），我們可以結(jié)合兩個梯度并使用background-blend-mode來平滑事情：
我們的噪音效果是完美的！即使我們仔細觀察每個示例，也沒有任何梯度的痕跡，而是美麗的顆粒狀靜態(tài)噪聲。我們剛剛將那個抗鋸齒錯誤變成了一個巧妙的功能！
添加動力小姐姐微信
電話咨詢
400-660-8066
