這篇文章跟大家介紹一下背景的一些有趣的知識,利用一些極小的單位,只需要短短幾行程式碼,就能夠產生出美妙而又有意思的背景效果~
本文的主角主要是:
什麼是數量級對背景圖形呢?我們來看這樣有意思的現象:
我們使用repeating-conic-gradient
多重角向漸變實作一個圖形,程式碼非常的簡單,示意如下:
<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
非常關鍵,這裡的角度越小(小於 1deg 為佳),圖形越酷炫,也就是我們說的數量級對背景圖形的影響。
CodePen -- One Line CSS Pattern
在之前,如果我們直接寫下述的過渡代碼,是無法得到補間過渡動畫的,只會有逐幀動畫:
div{ background: repeating-conic-gradient(#fff, #000, #fff 0.1deg); transition: background 1s; } div:hover { background: repeating-conic-gradient(#fff, #000, #fff 30deg); }
只能得到這樣的效果,原因在於 CSS 不支援對這種複雜的漸變進行直接的過渡動畫:
OK,接下來,運用在這篇文章--CSS @property,讓不可能改變可能 介紹的CSS @property
的知識,我們可以利用CSS @property
來觀察它們兩種狀態變化的過程。
簡單改造下程式碼,核心程式碼如下:
@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,本著尋找不同數量級單位對這個圖形的影響,卻歪打正著得到了一個看著很魔幻的過渡動畫效果。強烈建議你點進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 ); }
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 代碼,你可以戳進這裡看看:
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 張圖形,作為比較:
在 0.001px
到 0.0001px
这个区间段,基本上图形已经退化为粒子图形,见不到径向渐变的轮廓了,而到了 0.00001px
这个级别,居然退化为了一张纯色图片!
CodePen Demo -- 不同级别长度单位对 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 ); }
这不是非常类似电视雪花屏的效果么?微调 0.0008px
这个参数, 利用几帧不同的动画,我们就可以得到电视雪花噪声的动画了。
啊哈,非常的有意思,完整的源码你可以戳这里:
Copepen Demo -- PURE CSS TV NOISE EFFECT (Only Chrome 85+)
更多编程相关知识,请访问:编程视频!!
以上是純CSS實現美妙而有意思的背景效果! !的詳細內容。更多資訊請關注PHP中文網其他相關文章!