如何使用cssfilter的drop-shadow()函數(shù)創(chuàng)建線條光影效果

如何使用css filter的drop-shadow()函數(shù)創(chuàng)建線條光影效果，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

創(chuàng)新互聯(lián)建站主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、全網(wǎng)營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式網(wǎng)站建設(shè)、手機(jī)網(wǎng)站制作設(shè)計(jì)、微商城、網(wǎng)站托管及成都網(wǎng)站維護(hù)公司、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為自上料攪拌車行業(yè)客戶提供了網(wǎng)站營銷服務(wù)。

下面將介紹一種利用 CSS 濾鏡 filter 的 drop-shadow()，實(shí)現(xiàn)對 HTML 元素及 SVG 元素的部分添加陰影效果，以實(shí)現(xiàn)一種酷炫的光影效果，用于各種不同的場景之中。

使用 WebGL 實(shí)現(xiàn)的線條光影 Neon 動畫

某天在逛 CodePen 的時(shí)候，發(fā)現(xiàn)了一個(gè)非常有意思的，使用 WebGL 實(shí)現(xiàn)的線條光影效果 -- NEON LOVE，非常的有意思

但是由于源代碼是使用 WebGL 完成，繪制如此簡單的一個(gè)效果，通過 GLSL 著色器等代碼，接近了 300 行。

那么，我們能否使用 HTML(SVG)+CSS 實(shí)現(xiàn)它呢？

利用 drop-shadow 對元素的部分內(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%;
}

如果我希望，僅僅只給這個(gè)圓弧添加陰影，嘗試使用 box-shadow：

div {
    width: 200px;
    height: 200px;
    border-top: 5px solid #000;
    border-radius: 50%;
  + box-shadow: 0 0 5px #000;
}

emm，明顯是不行的，陰影會加給整個(gè) div

為了解決這種情況，聰明的同學(xué)會立馬想到 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() 也可以對一個(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);
}

我們將得到可見部分圖案的多重陰影疊加效果

我們將上述例子的黑白顏色對換一下，就能得到一副很有意境的圖案，像是在深邃的太空中看某個(gè)透光的星球般：

CodePen Demo -- multi drop-shadow Neon

實(shí)現(xiàn)心形線條動畫

接下來，就是實(shí)現(xiàn)心形線條動畫了，這點(diǎn)利用 SVG 還是比較簡單的。

我們首先需要得到一個(gè)利用 SVG <Path> 實(shí)現(xiàn)的心形形狀，可以選擇自己繪制 SVG 路徑，也可以借助一些工具完成。

這里我借助了這個(gè)工具得到一個(gè)心形的 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，我們可以輕松的得到一個(gè)心形追逐動畫：

<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;
  }
}

簡單解釋上上述代碼：

兩個(gè)相同的 SVG 圖形，通過 stroke-dashoffset 將完整的線條圖形截成部分
通過 stroke-dashoffset 的從 0 到 928 的變化，實(shí)現(xiàn)一次完整的線條動畫循環(huán)（這里的 928 是完整的 path 的長度，可以通過 JavaScript 腳本求出）
整個(gè)動畫過程 2s，設(shè)置其中一個(gè)的 animation-delay: -1s，也就是提前 1s 觸發(fā)動畫，這樣就實(shí)現(xiàn)了兩個(gè)心形線條的追逐動畫

給線條添加光影

有了上述兩步的鋪墊，這一步就非常好理解了。

最后，我們只需要給兩段 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)的效果

擴(kuò)展延伸

當(dāng)然，掌握了上述的技巧后，還有非常多有意思的效果我們可以去探索實(shí)現(xiàn)的，這里我簡單的拋磚引玉。羅列兩個(gè)我自己嘗試的效果。

其中一大類是運(yùn)用于按鈕之上，可以實(shí)現(xiàn)按鈕帶光影的按鈕效果，下圖是其中一個(gè)的示意，巧妙運(yùn)用 stroke-dashoffset，它可以有非常多的變形。

當(dāng)然，我們也不是一定要借助 SVG，僅僅是 HTML + CSS 也是可以運(yùn)用這個(gè)效果，利用它實(shí)現(xiàn)一個(gè)簡單的 Loading 效果。

看完上述內(nèi)容，你們掌握如何使用css filter的drop-shadow()函數(shù)創(chuàng)建線條光影效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前題目：如何使用cssfilter的drop-shadow()函數(shù)創(chuàng)建線條光影效果
標(biāo)題路徑：http://bm7419.com/article18/gihigp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、域名注冊、網(wǎng)站制作、定制網(wǎng)站、網(wǎng)站收錄、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容