您好,登錄后才能下訂單哦!
如何使用css filter的drop-shadow()函數(shù)創(chuàng)建線條光影效果,相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
下面將介紹一種利用 CSS 濾鏡 filter 的 drop-shadow()
,實現(xiàn)對 HTML 元素及 SVG 元素的部分添加陰影效果,以實現(xiàn)一種酷炫的光影效果,用于各種不同的場景之中。
某天在逛 CodePen 的時候,發(fā)現(xiàn)了一個非常有意思的,使用 WebGL 實現(xiàn)的線條光影效果 -- NEON LOVE,非常的有意思
但是由于源代碼是使用 WebGL 完成,繪制如此簡單的一個效果,通過 GLSL 著色器等代碼,接近了 300 行。
那么,我們能否使用 HTML(SVG)+CSS 實現(xiàn)它呢?
首先,要實現(xiàn)上述效果,很重要的一步是給元素的部分內(nèi)容添加上陰影。
假設(shè)我們有這樣一個圖形:
<div></div>
我們給這個 div 圖形設(shè)置 border-radius: 50%
,并且添加一個 border-top
:
div { width: 200px; height: 200px; border-top: 5px solid #000; border-radius: 50%; }
如果我希望,僅僅只給這個圓弧添加陰影,嘗試使用 box-shadow
:
div { width: 200px; height: 200px; border-top: 5px solid #000; border-radius: 50%; + box-shadow: 0 0 5px #000; }
emm,明顯是不行的,陰影會加給整個 div
為了解決這種情況,聰明的同學(xué)會立馬想到 filter: drop-shadow()
,它就是為了解決這個問題而誕生的,box-shadow
屬性在元素的整個框后面創(chuàng)建一個矩形陰影, 而 drop-shadow()
過濾器則是創(chuàng)建一個符合圖像本身形狀(alpha 通道)的陰影。
好,我們使用 drop-shadow()
替換 box-shadow
:
div { width: 200px; height: 200px; border-top: 5px solid #000; border-radius: 50%; - box-shadow: 0 0 5px #000; + filter: drop-shadow(0 0 5px #000); }
這樣,我們就能得到符合圖像本身形狀(alpha 通道)的陰影
并且,drop-shadow()
也可以對一個圖像作用多次,實現(xiàn)類似陰影的多重陰影效果:
div { ... filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 5px #000) drop-shadow(0 0 10px #000) drop-shadow(0 0 20px #000); }
我們將得到可見部分圖案的多重陰影疊加效果
我們將上述例子的黑白顏色對換一下,就能得到一副很有意境的圖案,像是在深邃的太空中看某個透光的星球般:
CodePen Demo -- multi drop-shadow Neon
接下來,就是實現(xiàn)心形線條動畫了,這點利用 SVG 還是比較簡單的。
我們首先需要得到一個利用 SVG <Path>
實現(xiàn)的心形形狀,可以選擇自己繪制 SVG 路徑,也可以借助一些工具完成。
這里我借助了這個工具得到一個心形的 Path 路徑:SVGPathEditor
通過工具,快速繪制想要的形狀,拿到對應(yīng)的 Path
核心就是拿到這一段 SVG Path 路徑:
M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160
有了它,利用 SVG 的 stroke-dasharray
和 stroke-offset
,我們可以輕松的得到一個心形追逐動畫:
<div class="container"> <svg> <path class="line" d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160" /> </svg> <svg> <path class="line line2" d="M 400 160 A 2 2 90 0 0 260 160 A 2 2 90 0 0 120 160 C 120 230 260 270 260 350 C 260 270 400 230 400 160" /> </svg> </div>
body { background: #000; } svg { position: absolute; } .container { position: relative; } .line { fill: none; stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; stroke: #fff; stroke-dasharray: 328 600; animation: rotate 2s infinite linear; } .line2 { animation: rotate 2s infinite -1s linear; } @keyframes rotate { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 928; } }
簡單解釋上上述代碼:
兩個相同的 SVG 圖形,通過 stroke-dashoffset
將完整的線條圖形截成部分
通過 stroke-dashoffset
的從 0 到 928 的變化,實現(xiàn)一次完整的線條動畫循環(huán)(這里的 928 是完整的 path 的長度,可以通過 JavaScript 腳本求出)
整個動畫過程 2s,設(shè)置其中一個的 animation-delay: -1s
,也就是提前 1s 觸發(fā)動畫,這樣就實現(xiàn)了兩個心形線條的追逐動畫
有了上述兩步的鋪墊,這一步就非常好理解了。
最后,我們只需要給兩段 SVG 線條,利用 drop-shadow()
添加不同顏色的多重陰影即可:
.line { ... --colorA: #f24983; filter: drop-shadow(0 0 2px var(--colorA)) drop-shadow(0 0 5px var(--colorA)) drop-shadow(0 0 10px var(--colorA)) drop-shadow(0 0 15px var(--colorA)) drop-shadow(0 0 25px var(--colorA)); } .line2 { --colorA: #37c1ff; }
最終,我們就利用 SVG + CSS 近乎完美的復(fù)刻了文章開頭使用 WebGL 實現(xiàn)的效果
當(dāng)然,掌握了上述的技巧后,還有非常多有意思的效果我們可以去探索實現(xiàn)的,這里我簡單的拋磚引玉。羅列兩個我自己嘗試的效果。
其中一大類是運用于按鈕之上,可以實現(xiàn)按鈕帶光影的按鈕效果,下圖是其中一個的示意,巧妙運用 stroke-dashoffset
,它可以有非常多的變形。
當(dāng)然,我們也不是一定要借助 SVG,僅僅是 HTML + CSS 也是可以運用這個效果,利用它實現(xiàn)一個簡單的 Loading 效果。
看完上述內(nèi)容,你們掌握如何使用css filter的drop-shadow()函數(shù)創(chuàng)建線條光影效果的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。