妙用 Drop-shadow 實(shí)現(xiàn)酷炫線條光影效果
本文將介紹一種利用 CSS 濾鏡 filter 的 drop-shadow()，實(shí)現(xiàn)對(duì) HTML 元素及 SVG 元素的部分添加陰影效果，以實(shí)現(xiàn)一種酷炫的光影效果，用于各種不同的場(chǎng)景之中。通過本文，你可以學(xué)到：
如何利用 filter: drop-shadow() 對(duì)元素的部分內(nèi)容添加單重及多重陰影
HTML 元素配合 filter: drop-shadow() 以及 SVG 元素配合 filter: drop-shadow() 生成的光影效果
使用 WebGL 實(shí)現(xiàn)的線條光影 Neon 動(dòng)畫
某天在逛 CodePen 的時(shí)候，發(fā)現(xiàn)了一個(gè)非常有意思的，使用 WebGL 實(shí)現(xiàn)的線條光影效果 -- NEON LOVE[1]，非常的有意思：
但是由于源代碼是使用 WebGL 完成，繪制如此簡(jiǎn)單的一個(gè)效果，通過 GLSL 著色器等代碼，接近了 300 行。
那么，我們能否使用 HTML(SVG)+CSS 實(shí)現(xiàn)它呢?
利用 drop-shadow 對(duì)元素的部分內(nèi)容添加單重及多重陰影
首先，要實(shí)現(xiàn)上述效果，很重要的一步是給元素的部分內(nèi)容添加上陰影。
假設(shè)我們有這樣一個(gè)圖形：
- <div></div>
我們給這個(gè) div 圖形設(shè)置 border-radius: 50%，并且添加一個(gè) border-top：
- div {
- width: 200px;
- height: 200px;
- border-top: 5px solid #000;
- border-radius: 50%;
- }
結(jié)果如下：
如果我希望，僅僅只給這個(gè)圓弧添加陰影，嘗試使用 box-shadow：
- div {
- width: 200px;
- height: 200px;
- border-top: 5px solid #000;
- border-radius: 50%;
- + box-shadow: 0 0 5px #000;
- }
emm，明顯是不行的，陰影會(huì)加給整個(gè) div：
為了解決這種情況，聰明的同學(xué)會(huì)立馬想到 filter: drop-shadow()，它就是為了解決這個(gè)問題而誕生的，box-shadow 屬性在元素的整個(gè)框后面創(chuàng)建一個(gè)矩形陰影, 而 drop-shadow() 過濾器則是創(chuàng)建一個(gè)符合圖像本身形狀(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() 也可以對(duì)一個(gè)圖像作用多次，實(shí)現(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);
- }
我們將得到可見部分圖案的多重陰影疊加效果：
我們將上述例子的黑白顏色對(duì)換一下，就能得到一副很有意境的圖案，像是在深邃的太空中看某個(gè)透光的星球般：
CodePen Demo -- multi drop-shadow Neon[2]
實(shí)現(xiàn)心形線條動(dòng)畫
接下來，就是實(shí)現(xiàn)心形線條動(dòng)畫了，這點(diǎn)利用 SVG 還是比較簡(jiǎn)單的。關(guān)于 SVG 線條動(dòng)畫，之前也有多次提及，感興趣的同學(xué)也可以看看這兩篇文章：
- 【W(wǎng)eb動(dòng)畫】SVG 線條動(dòng)畫入門[3]
- 【W(wǎng)eb動(dòng)畫】SVG 實(shí)現(xiàn)復(fù)雜線條動(dòng)畫[4]
我們首先需要得到一個(gè)利用 SVG
這里我借助了這個(gè)工具得到一個(gè)心形的 Path 路徑：SVGPathEditor[5]
通過工具，快速繪制想要的形狀，拿到對(duì)應(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，我們可以輕松的得到一個(gè)心形追逐動(dòng)畫：
- <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;
- }
- }
簡(jiǎn)單解釋上上述代碼：
- 兩個(gè)相同的 SVG 圖形，通過 stroke-dashoffset 將完整的線條圖形截成部分
- 通過 stroke-dashoffset 的從 0 到 928 的變化，實(shí)現(xiàn)一次完整的線條動(dòng)畫循環(huán)(這里的 928 是完整的 path 的長(zhǎng)度，可以通過 JavaScript 腳本求出)
- 整個(gè)動(dòng)畫過程 2s，設(shè)置其中一個(gè)的 animation-delay: -1s，也就是提前 1s 觸發(fā)動(dòng)畫，這樣就實(shí)現(xiàn)了兩個(gè)心形線條的追逐動(dòng)畫
效果如下：
給線條添加光源
有了上述兩步的鋪墊，這一步就非常好理解了。
最后，我們只需要給兩段 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 實(shí)現(xiàn)的效果：
完整的代碼，你可以猛擊 -- CSS 靈感 - SVG 配合 drop-shadow 實(shí)現(xiàn)線條光影效果[6]
擴(kuò)展延伸
當(dāng)然，掌握了上述的技巧后，還有非常多有意思的效果我們可以去探索實(shí)現(xiàn)的，這里我簡(jiǎn)單的拋磚引玉。羅列兩個(gè)我自己嘗試的效果。
其中一大類是運(yùn)用于按鈕之上，可以實(shí)現(xiàn)按鈕帶光影的按鈕效果，下圖是其中一個(gè)的示意，巧妙運(yùn)用 stroke-dashoffset，它可以有非常多的變形：
完整源代碼可以猛擊 CodePen -- Neon Line Button[7]
當(dāng)然，我們也不是一定要借助 SVG，僅僅是 HTML + CSS 也是可以運(yùn)用這個(gè)效果，利用它實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 Loading 效果：
完整源代碼可以猛擊 CodePen -- Neon Loading[8]
最后
好了，本文到此結(jié)束，希望對(duì)你有幫助 :)
參考資料
[1]NEON LOVE:
https://codepen.io/Chokcoco/pen/KKmvYor
[2]CodePen Demo -- multi drop-shadow Neon:
https://codepen.io/Chokcoco/pen/mdwvrVO
[3]【W(wǎng)eb動(dòng)畫】SVG 線條動(dòng)畫入門:
https://www.cnblogs.com/coco1s/p/6225973.html
[4]【W(wǎng)eb動(dòng)畫】SVG 實(shí)現(xiàn)復(fù)雜線條動(dòng)畫:
https://www.cnblogs.com/coco1s/p/6230165.html
[5]SVGPathEditor:
https://yqnn.github.io/svg-path-editor/
[6]CSS 靈感 - SVG 配合 drop-shadow 實(shí)現(xiàn)線條光影效果:
https://csscoco.com/inspiration/#/./svg/svg-dropshadow-line-neon-effect.md
[7]CodePen -- Neon Line Button:
https://codepen.io/Chokcoco/pen/dyRQEKQ[8]CodePen -- Neon Loading: https://codepen.io/Chokcoco/pen/OJgdRPm
[9]CSS 靈感:
https://csscoco.com/inspiration/#/
[10]Github -- iCSS:
https://github.com/chokcoco/iCSS
