Gunakan fungsi drop-shadow() penapis CSS dengan bijak untuk mencipta kesan cahaya dan bayang garis

Artikel ini akan memperkenalkan drop-shadow() yang menggunakan penapis CSS untuk menambah kesan bayang pada bahagian elemen HTML dan elemen SVG untuk mencapai kesan cahaya dan bayang yang sejuk, yang boleh digunakan dalam pelbagai senario.

Melalui artikel ini, anda boleh belajar:

• Cara menggunakan filter: drop-shadow() untuk menambah elemen tunggal pada bahagian daripada kandungan elemen Beri perhatian kepada berbilang bayang dan gunakan berbilang bayang untuk mencapai kesan Neon

• elemen HTML dengan filter: drop-shadow() dan elemen SVG dengan filter: drop-shadow() untuk menjana cahaya dan bayang kesan

Cahaya garisan dan bayang-bayang Animasi neon dilaksanakan menggunakan WebGL

Pada suatu hari semasa menyemak imbas CodePen, saya mendapati kesan cahaya dan bayang garisan yang sangat menarik dilaksanakan menggunakan WebGL - NEON LOVE, Sangat menarik:

Tetapi memandangkan kod sumber dilengkapkan menggunakan WebGL, lukisan kesan yang begitu mudah memerlukan hampir 300 baris kod seperti GLSL shader .

Jadi, bolehkah kita mencapainya menggunakan HTML(SVG) CSS?

Gunakan bayang-bayang jatuh untuk menambah bayang-bayang tunggal dan berbilang pada sebahagian daripada kandungan elemen

Pertama sekali, untuk mencapai kesan di atas, langkah yang sangat penting ialah menambah bayang-bayang pada sebahagian daripada kandungan unsur.

Andaikan kita mempunyai grafik seperti ini:

<div></div>

Kami menetapkan border-radius: 50% pada grafik div ini dan menambah border-top:

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

Hasilnya adalah seperti berikut :

Jika saya ingin menambah bayang pada arka ini, cuba gunakan box-shadow:

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

emm, jelas sekali tidak akan berfungsi , bayang akan ditambahkan pada keseluruhan div:

Untuk menyelesaikan situasi ini, pelajar pintar akan serta-merta memikirkan filter: drop-shadow(), yang dilahirkan untuk menyelesaikan masalah ini, < Atribut 🎜> mencipta bayang segi empat tepat di belakang keseluruhan kotak elemen, manakala penapis box-shadow mencipta bayang-bayang yang mematuhi bentuk imej itu sendiri (saluran alfa). drop-shadow()

Baiklah, mari kita gantikan

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

Dengan cara ini kita mendapat bayang yang sesuai dengan bentuk imej itu sendiri (saluran alfa):

Dan,

juga boleh digunakan beberapa kali pada imej untuk mencapai berbilang kesan bayang-bayang yang serupa dengan bayang-bayang: 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);
}

Kami akan mendapat berbilang bayang-bayang tindanan bahagian corak yang kelihatan Kesan:

Jika kita menukar warna hitam dan putih contoh di atas, kita boleh mendapatkan corak yang sangat artistik, seperti melihat melalui lensa dalam angkasa lepas Seperti planet yang terang:

Demo CodePen -- Neon titisan berbilang

Merealisasikan berbentuk hati animasi garisan

Langkah seterusnya ialah melaksanakan animasi garisan berbentuk hati, yang agak mudah menggunakan SVG.

Pertama-tama kami perlu mendapatkan bentuk hati yang dilaksanakan menggunakan SVG

Anda boleh memilih untuk melukis laluan SVG sendiri, atau anda boleh menggunakan beberapa alatan untuk melengkapkannya. <Path>

Di sini saya menggunakan alat ini untuk mendapatkan Laluan berbentuk hati:

SVGPathEditor

Gunakan alat untuk melukis bentuk yang diingini dengan cepat dan dapatkan Laluan yang sepadan:

Intinya adalah untuk mendapatkan Laluan SVG ini:

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

Dengannya, menggunakan

dan stroke-dasharray SVG, kita boleh mendapatkan hati dengan mudah- animasi mengejar berbentuk: stroke-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;
  }
}

Terangkan secara ringkas kod di atas:

• Dua grafik SVG yang sama, melalui

  Potong grafik garisan lengkap kepada bahagian stroke-dashoffset

• Dengan menukar

  daripada 0 kepada 928, kitaran animasi baris lengkap direalisasikan (928 di sini ialah panjang laluan lengkap, Boleh didapati melalui skrip JavaScript) stroke-dashoffset

• 整个动画过程 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

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

Atas ialah kandungan terperinci Gunakan fungsi drop-shadow() penapis CSS dengan bijak untuk mencipta kesan cahaya dan bayang garis. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!