站長資訊網(wǎng)本文將介紹一種利用 CSS 濾鏡 filter 的 drop-shadow()，實現(xiàn)對 HTML 元素及 SVG 元素的部分添加陰影效果，以實現(xiàn)一種酷炫的光影效果，用于各種不同的場景之中。
通過本文，你可以學(xué)到：
-
如何利用
filter: drop-shadow()對元素的部分內(nèi)容添加單重及多重陰影，以及利用多重陰影實現(xiàn) Neon 效果 -
HTML 元素配合
filter: drop-shadow()以及 SVG 元素配合filter: drop-shadow()生成的光影效果
使用 WebGL 實現(xiàn)的線條光影 Neon 動畫
某天在逛 CodePen 的時候，發(fā)現(xiàn)了一個非常有意思的，使用 WebGL 實現(xiàn)的線條光影效果 — NEON LOVE，非常的有意思：
但是由于源代碼是使用 WebGL 完成，繪制如此簡單的一個效果，通過 GLSL 著色器等代碼，接近了 300 行。
那么，我們能否使用 HTML(SVG)+CSS 實現(xiàn)它呢？
利用 drop-shadow 對元素的部分內(nèi)容添加單重及多重陰影
首先，要實現(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%; }
結(jié)果如下：
如果我希望，僅僅只給這個圓弧添加陰影，嘗試使用 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)心形線條動畫
接下來，就是實現(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)的效果：
完整的代碼，你可以猛擊 — CSS 靈感 – SVG 配合 drop-shadow 實現(xiàn)線條光影效果
擴展延伸
當然，掌握了上述的技巧后，還有非常多有意思的效果我們可以去探索實現(xiàn)的，這里我簡單的拋磚引玉。羅列兩個我自己嘗試的效果。
其中一大類是運用于按鈕之上，可以實現(xiàn)按鈕帶光影的按鈕效果，下圖是其中一個的示意，巧妙運用 stroke-dashoffset，它可以有非常多的變形：
完整源代碼可以猛擊 CodePen — Neon Line Button
當然，我們也不是一定要借助 SVG，僅僅是 HTML + CSS 也是可以運用這個效果，利用它實現(xiàn)一個簡單的 Loading 效果：
完整源代碼可以猛擊 CodePen — Neon Loading
最后
好了，本文到此結(jié)束，希望對你有幫助 ??
如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
原文地址：https://juejin.cn/post/7016521320183644173
作者：chokcoco
