首頁 >web前端 >css教學 >巧用css filter的drop-shadow()函數來建立線條光影效果

巧用css filter的drop-shadow()函數來建立線條光影效果

青灯夜游
青灯夜游轉載
2021-10-08 19:00:003682瀏覽

本文將介紹一種利用CSS 濾鏡filter 的drop-shadow(),實現對HTML 元素及SVG 元素的部分添加陰影效果,以實現一種酷炫的光影效果,用於各種不同的場景之中。

巧用css filter的drop-shadow()函數來建立線條光影效果

透過本文,你可以學到:

  • 如何利用filter: drop-shadow() 為元素的部分內容加上單重及多重陰影,以及利用多重陰影實現Neon 效果

  • #HTML 元素配合filter: drop-shadow()以及SVG 元素配合filter: drop-shadow() 產生的光影效果

使用WebGL 實現的線條光影Neon 動畫

某天在逛CodePen 的時候,發現了一個很有意思的,使用WebGL 實現的線條光影效果-- NEON LOVE,非常的有趣:

巧用css filter的drop-shadow()函數來建立線條光影效果

但是由於原始程式碼是使用WebGL 完成,繪製如此簡單的一個效果,透過GLSL 著色器等程式碼,接近了300 行。

那麼,我們能否使用 HTML(SVG) CSS 來實現它呢?

利用 drop-shadow 對元素的部分內容添加單重及多重陰影

#首先,要實現上述效果,很重要的一步是為元素的部分內容添加上陰影。

假設我們有這樣一個圖形:

<div></div>

我們給這個div 圖形設定border-radius: 50%,並且新增一個border-top

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

結果如下:

巧用css filter的drop-shadow()函數來建立線條光影效果

如果我希望,僅僅只給這個圓弧添加陰影,嘗試使用box-shadow

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

emm,很明顯是不行的,陰影會加給整個div:

巧用css filter的drop-shadow()函數來建立線條光影效果

為了解決這種情況,聰明的同學會立刻想到filter: drop-shadow(),它就是為了解決這個問題而誕生的,box-shadow 屬性在元素的整個框後面創建一個矩形陰影, 而drop -shadow() 濾鏡則是建立一個符合影像本身形狀(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 通道)的陰影:

巧用css filter的drop-shadow()函數來建立線條光影效果

並且,drop-shadow() 也可以對一個圖像作用多次,實現類似陰影的多重陰影效果:

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

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

巧用css filter的drop-shadow()函數來建立線條光影效果

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

巧用css filter的drop-shadow()函數來建立線條光影效果

#CodePen Demo -- multi drop-shadow Neon

實作心形線條動畫

接下來,就是實作心形線條動畫了,這點利用SVG 還是比較簡單的。

我們首先需要得到一個利用 SVG <path></path> 實作的心形形狀,可以選擇自己繪製 SVG 路徑,也可以藉助一些工具完成。

這裡我借助了這個工具得到一個心形的Path 路徑:SVGPathEditor

透過工具,快速繪製想要的形狀,拿到對應的Path:

巧用css filter的drop-shadow()函數來建立線條光影效果

核心就是要拿到這段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-dasharraystroke-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 的變化,實現一次完整的線條動畫循環(這裡的928 是完整的path 的長度,可以透過JavaScript 腳本求出)

  • 整个动画过程 2s,设置其中一个的 animation-delay: -1s,也就是提前 1s 触发动画,这样就实现了两个心形线条的追逐动画

效果如下:

巧用css filter的drop-shadow()函數來建立線條光影效果

给线条添加光影

有了上述两步的铺垫,这一步就非常好理解了。

最后,我们只需要给两段 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 近乎完美的复刻了文章开头使用 WebGL 实现的效果:

巧用css filter的drop-shadow()函數來建立線條光影效果

完整的代码,你可以猛击 -- CSS 灵感 - SVG 配合 drop-shadow 实现线条光影效果

扩展延伸

当然,掌握了上述的技巧后,还有非常多有意思的效果我们可以去探索实现的,这里我简单的抛砖引玉。罗列两个我自己尝试的效果。

其中一大类是运用于按钮之上,可以实现按钮带光影的按钮效果,下图是其中一个的示意,巧妙运用 stroke-dashoffset,它可以有非常多的变形:

巧用css filter的drop-shadow()函數來建立線條光影效果

完整源代码可以猛击 CodePen -- Neon Line Button

当然,我们也不是一定要借助 SVG,仅仅是 HTML + CSS 也是可以运用这个效果,利用它实现一个简单的 Loading 效果:

1巧用css filter的drop-shadow()函數來建立線條光影效果

完整源代码可以猛击 CodePen -- Neon Loading

最后

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

原文地址:https://juejin.cn/post/7016521320183644173

作者:chokcoco

更多编程相关知识,请访问:编程视频!!

以上是巧用css filter的drop-shadow()函數來建立線條光影效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:掘金--chokcoco。如有侵權,請聯絡admin@php.cn刪除