网上科普有关“CSS技巧：妙用drop-shadow实现线条光影效果”话题很是火热，小编也是针对CSS技巧：妙用drop-shadow实现线条光影效果寻找了一些与之相关的一些信息进行分析 ，如果能碰巧解决你现在面临的问题 ，希望能够帮助到您 。
本文将介绍一种利用CSS滤镜filter的drop-shadow()，实现对HTML元素及SVG元素的部分添加阴影效果，以实现一种酷炫的光影效果 ，用于各种不同的场景之中 。通过本文 ，你可以学到：
如何利用filter:drop-shadow()对元素的部分内容添加单重及多重阴影，以及利用多重阴影实现Neon效果。
HTML元素配合filter:drop-shadow()以及SVG元素配合filter:drop-shadow()生成的光影效果。
使用WebGL实现的线条光影Neon动画某天在逛CodePen的时候 ，发现了一个非常有意思的 ，使用WebGL实现的线条光影效果--NEONLOVE，非常的有意思：
但是由于源代码是使用WebGL完成 ，绘制如此简单的一个效果 ，通过GLSL着色器等代码，接近了300行 。
那么 ，我们能否使用HTML(SVG)+CSS实现它呢？
利用drop-shadow对元素的部分内容添加单重及多重阴影首先 ，要实现上述效果，很重要的一步是给元素的部分内容添加上阴影 。
假设我们有这样一个图形：
<div></div>我们给这个div图形设置border-radius:50% ，并且添加一个border-top：
div{width:200px;height:200px;border-top:5pxsolid#000;border-radius:50%;}结果如下：
如果我希望 ，仅仅只给这个圆弧添加阴影，尝试使用box-shadow：
div{width:200px;height:200px;border-top:5pxsolid#000;border-radius:50%;+box-shadow:005px#000;}emm，明显是不行的 ，阴影会加给整个div：
为了解决这种情况 ，聪明的同学会立马想到filter:drop-shadow()，它就是为了解决这个问题而诞生的 ，box-shadow属性在元素的整个框后面创建一个矩形阴影,而drop-shadow()过滤器则是创建一个符合图像本身形状(alpha通道)的阴影。
好 ，我们使用drop-shadow()替换box-shadow：
div{width:200px;height:200px;border-top:5pxsolid#000;border-radius:50%;-box-shadow:005px#000;+filter:drop-shadow(005px#000);}这样，我们就能得到符合图像本身形状(alpha通道)的阴影：
并且 ，drop-shadow()也可以对一个图像作用多次 ，实现类似阴影的多重阴影效果：
div{...filter:drop-shadow(002px#000)drop-shadow(005px#000)drop-shadow(0010px#000)drop-shadow(0020px#000);}我们将得到可见部分图案的多重阴影叠加效果：
我们将上述例子的黑白颜色对换一下，就能得到一副很有意境的图案 ，像是在深邃的太空中看某个透光的星球般：
CodePenDemo--multidrop-shadowNeon
实现心形线条动画接下来 ，就是实现心形线条动画了，这点利用SVG还是比较简单的 。关于SVG线条动画 ，之前也有多次提及 ，感兴趣的同学也可以看看这两篇文字：
Web动画SVG线条动画入门
Web动画SVG实现复杂线条动画
我们首先需要得到一个利用SVG<Path>实现的心形形状，可以选择自己绘制SVG路径，也可以借助一些工具完成 。
这里我借助了这个工具得到一个心形的Path路径：SVGPathEditor
通过工具 ，快速绘制想要的形状 ，拿到对应的Path：
核心就是拿到这一段SVGPath路径：
M400160A229000260160A229000120160C120230260270260350C260270400230400160有了它，利用SVG的stroke-dasharray和stroke-offset ，我们可以轻松的得到一个心形追逐动画：
<div><svg><pathd="M400160A229000260160A229000120160C120230260270260350C260270400230400160"/></svg><svg><pathd="M400160A229000260160A229000120160C120230260270260350C260270400230400160"/></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:328600;animation:rotate2sinfinitelinear;}.line2{animation:rotate2sinfinite-1slinear;}@keyframesrotate{0%{stroke-dashoffset:0;}100%{stroke-dashoffset:928;}}简单解释上上述代码：
两个相同的SVG图形 ，通过stroke-dashoffset将完整的线条图形截成部分
通过stroke-dashoffset的从0到928的变化，实现一次完整的线条动画循环（这里的928是完整的path的长度 ，可以通过JavaScript脚本求出）
整个动画过程2s ，设置其中一个的animation-delay:-1s，也就是提前1s触发动画 ，这样就实现了两个心形线条的追逐动画
效果如下：
给线条添加光影有了上述两步的铺垫 ，这一步就非常好理解了。
最后，我们只需要给两段SVG线条 ，利用drop-shadow()添加不同颜色的多重阴影即可：
.line{...--colorA:#f24983;filter:drop-shadow(002pxvar(--colorA))drop-shadow(005pxvar(--colorA))drop-shadow(0010pxvar(--colorA))drop-shadow(0015pxvar(--colorA))drop-shadow(0025pxvar(--colorA));}.line2{--colorA:#37c1ff;}最终 ，我们就利用SVG+CSS近乎完美的复刻了文章开头使用WebGL实现的效果：
完整的代码，你可以猛击--CSS灵感-SVG配合drop-shadow实现线条光影效果
扩展延伸当然，掌握了上述的技巧后 ，还有非常多有意思的效果我们可以去探索实现的 ，这里我简单的抛砖引玉 。罗列两个我自己尝试的效果 。
其中一大类是运用于按钮之上，可以实现按钮带光影的按钮效果 ，下图是其中一个的示意 ，巧妙运用stroke-dashoffset，它可以有非常多的变形：
完整源代码可以猛击CodePen--NeonLineButton
当然 ，我们也不是一定要借助SVG ，仅仅是HTML+CSS也是可以运用这个效果，利用它实现一个简单的Loading效果：
完整源代码可以猛击CodePen--NeonLoading
最后好了 ，本文到此结束 ，希望对你有帮助:)
如果还有什么疑问或者建议，可以多多交流 ，原创文章 ，文笔有限，才疏学浅，文中若有不正之处 ，万望告知。
关于“CSS技巧：妙用drop-shadow实现线条光影效果 ”这个话题的介绍 ，今天小编就给大家分享完了，如果对你有所帮助请保持对本站的关注！
本文来自作者[晓绿]投稿，不代表哔哔号立场，如若转载，请注明出处：https://www.ibb4.com/cshi/202512-1302.html
评论列表（4条）
我是哔哔号的签约作者“晓绿”！
希望本篇文章《CSS技巧：妙用drop-shadow实现线条光影效果》能对你有所帮助！
本站[哔哔号]内容主要涵盖：国足,欧洲杯,世界杯,篮球,欧冠,亚冠,英超,足球,综合体育
本文概览：网上科普有关“CSS技巧：妙用drop-shadow实现线条光影效果”话题很是火热，小编也是针对CSS技巧：妙用drop-shadow实现线条光影效果寻找了一些与之相关的一些信...