CSSフィルターのdrop-shadow()関数を賢く使って、線の光と影の効果を作成します。

を使用して実装されたハート型の形状を取得する必要があります。SVG パスを自分で描画することも、いくつかのツールを使用して完成させることもできます。 ここでは、ハート型のパスを取得するためにこのツールを使用しました:

このツールを使用して、目的の形状をすばやく描画し、対応するパスを取得します:

中心となるのは、次の SVG パス パスを取得することです:

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 class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;">&lt;div class=&quot;container&quot;&gt; &lt;svg&gt; &lt;path class=&quot;line&quot; d=&quot;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&quot; /&gt; &lt;/svg&gt; &lt;svg&gt; &lt;path class=&quot;line line2&quot; d=&quot;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&quot; /&gt; &lt;/svg&gt; &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">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; } }</pre><div class="contentsignin">ログイン後にコピー</div></div> 上記のコードを簡単に説明します:

2 つの同一の SVG グラフィック、完全なライン グラフィックを切り取る完全なライン アニメーション サイクル (ここでは 928) を実現するために、
• ストローク-ダッシュオフセット

を 0 から 928 に変更することで、
• ストローク-ダッシュオフセット
  ### によってパーツに分割します。は完全なパスの長さであり、JavaScript スクリプトを通じて見つけることができます) ###

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

效果如下：

给线条添加光影

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

最后，我们只需要给两段 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 灵感 - SVG 配合 drop-shadow 实现线条光影效果

扩展延伸

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

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

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

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

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

最后

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

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

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

作者：chokcoco

更多编程相关知识，请访问：编程视频！！

以上がCSSフィルターのdrop-shadow()関数を賢く使って、線の光と影の効果を作成します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。