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

この記事では、CSS フィルターフィルターを使用して HTML 要素と SVG 要素の一部に影効果を追加し、クールな光と影の効果を実現する drop-shadow() メソッドを紹介します。さまざまなシナリオの。

この記事を通じて、次のことを学ぶことができます:

• filter:drop-shadow( ) 要素の一部に単一および複数のシャドウを追加し、複数のシャドウを使用してネオン効果を実現します

• HTML 要素の調整filter:drop-shadow() そして、filter を使用して SVG 要素によって生成された光と影の効果:drop-shadow()

WebGL

を使用して実装された線の光と影のネオン アニメーション

ある日、CodePen を閲覧していると、WebGL を使用して実装された非常に興味深い線の光と影の効果を見つけました - NEON LOVE、とても興味深いです:

# #ただし、ソースコードはWebGLで完成しているため、このような単純なエフェクトを描画するには、GLSLシェーダなどのコードが300行近く必要になります。

それでは、HTML(SVG) CSS を使用してそれを実現できるでしょうか?

ドロップシャドウを使用して要素のコンテンツの一部に 1 つまたは複数のシャドウを追加します

まず、上記の効果を達成するために非常に重要な手順は、要素のコンテンツの一部にシャドウを追加することです。要素の内容。

次のようなグラフィックがあるとします。

<div></div>

この div グラフィックに

border-radius: 50% を設定し、border-top## を追加します。 #: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>div { width: 200px; height: 200px; border-top: 5px solid #000; border-radius: 50%; }</pre><div class="contentsignin">ログイン後にコピー</div></div>結果は次のようになります:

この円弧に影を追加したいだけの場合は、

box-shadow を使用してみてください。

: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>div { width: 200px; height: 200px; border-top: 5px solid #000; border-radius: 50%; + box-shadow: 0 0 5px #000; }</pre><div class="contentsignin">ログイン後にコピー</div></div>emm、明らかにこれは不可能です。影は div 全体に追加されます:

この状況を解決するには賢い学生ならすぐに

filter:drop-shadow()

を思い浮かべるでしょう。これはこの問題を解決するために生まれました。box-shadow 属性は、ボックス全体の背後に長方形の影を作成します。要素、および drop -shadow() フィルターは、画像自体 (アルファ チャネル) の形状に準拠した影を作成します。 わかりました。

drop-shadow()

を使用して box-shadow を置き換えます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>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); }</pre><div class="contentsignin">ログイン後にコピー</div></div>このようにして、次の形状を取得できます。画像自体 (アルファ チャネル) のシャドウと一致します:

また、

drop-shadow()

を画像に複数回適用して、複数の効果を実現することもできます。影に似た影効果:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>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); }</pre><div class="contentsignin">ログイン後にコピー</div></div>パターンの表示部分の複数の影のオーバーレイ効果を取得します:

黒と黒を交換します。上の例の白色を使用すると、深宇宙にある光を透過する惑星を見ているような非常に芸術的なパターンが得られます:

CodePen デモ -- マルチドロップシャドウ ネオン

ハート型の線アニメーションを実現する

次のステップは、ハート型の線アニメーションを実装することです。これは SVG を使用して比較的簡単です。

最初に、SVG

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

SVGPathEditor

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

中心となるのは、次の 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 の

ストローク-dasharray

と ストローク-オフセット を使用します。 、ハート型の追跡アニメーションを簡単に取得できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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:php;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 サイトの他の関連記事を参照してください。