使用Drop-shadow实现炫酷的线条光影效果光影效果被用在各种场景中。通过本文，您可以了解到：如何使用filter:drop-shadow()给部分元素添加单阴影和多阴影HTML元素带filter:drop-shadow()和SVG元素带filter:drop-shadow()使用WebGL生成光影效果实现线条光影Neon动画某天在浏览CodePen时，发现了一个非常有趣的使用WebGL的线条光影效果——NEONLOVE[1]，非常有趣：但是因为源码是使用WebGL画出这么简单的效果，通过GLSL着色器等代码，接近300行。那么，我们是否可以使用HTML(SVG)+CSS来实现呢？使用drop-shadow为元素的一部分添加单个和多个阴影。首先，要达到上面的效果，很重要的一步就是添加一些阴影。假设我们有这样一个图形：
我们为这个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[2]实现心形线条动画接下来就是实现心形线条动画，使用SVG比较简单。关于SVG线条动画，之前已经多次提到。有兴趣的同学也可以看看这两篇文章：【Web动画】SVG线条动画介绍【3】【Web动画】SVG实现复杂线条动画【4】我们首先需要得到一个使用SVG实现的心形，可以选择自己绘制SVG路径，也可以使用一些工具来完成。这里我用这个工具得到一个心形的Path：SVGPathEditor[5]用工具快速绘制出想要的形状，得到对应的Path：核心就是得到这个SVGPath：M400160A229000260160A229000120160C120230260270260350C260270400230400160有了它，就用笔画-dasharray和SVG的stroke-offset，我们可以轻松得到一个心形的追逐动画：>
body{background:#000;}svg{position:ablinesolute;}.containstrokerfative:pos1none;strokerfativewidth:pos1none;-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是完整路径的长度，可以通过JavaScript脚本获取）。整个动画过程为2s，设置其中一个animation-delays：-1s，即提前1s触发动画，这样实现两条心形线的追逐动画效果如下：添加一个光源到线有了上面两个步骤的铺垫，这一步就很容易理解了。对于两条SVG线，使用drop-shadow()添加多个不同颜色的阴影：.line{...--colorA:#f24983;filter:drop-shadow(002pxvar(--colorA))drop-shadow(005pxvar(--colorA))投影(0010pxvar(--colorA))投影(0015pxvar(--colorA))投影(0025pxvar(--colorA));}.line2{--colorA:#37c1ff;}最后，我们用SVG+CSS几乎完美复现了文章开头使用WebGL实现的效果：完整代码，戳戳——CSSInspiration-SVGwithdrop-shadow实现线光以及阴影效果[6]Extension当然，在掌握了以上技巧之后，还有很多有趣的效果可以让我们去探索和实现。这里我干脆抛砖引玉。列举两个我自己试过的效果。其中一个大类应用在按钮上，可以在按钮上实现带有光影的按钮效果。下图是其中一个的示意图。巧用stroke-dashoffset，可以有很多变形：完整的源码可以猛戳CodePen————NeonLineButton[7]当然，我们不一定要用SVG，HTML+CSS也可以使用这个效果，并用它来实现一个简单的Loading效果：完整源码可以猛戳CodePen——NeonLoading[8]最后，本文到此结束，希望对你有所帮助：）参考文献[1]NEONLOVE:https://codepen.io/Chokcoco/pen/KKmvYor[2]CodePenDemo--multidrop-shadowNeon:https://codepen.io/Chokcoco/pen/mdwvrVO[3][[Web动画]SVG线条动画介绍：https://www.cnblogs.com/coco1s/p/6225973.html[4][Web动画]SVG实现复杂线条动画：https://www.cnblogs.com/coco1s/p/6230165.html[5]SVGPathEditor:https://yqnn.github.io/svg-path-editor/[6]CSS灵感-SVGwithdrop-shadow实现线条光影效果:https://csscoco.com/inspiration/#/./svg/svg-dropshadow-line-neon-effect.md[7]CodePen--NeonLineButton：https://codepen.io/Chokcoco/pen/dyRQEKQ[8]CodePen--NeonLoading：https://codepen.io/Chokcoco/pen/OJgdRPm[9]CSSInspiration：https：//csscoco.com/inspiration/#/[10]Github——iCSS：https://github.com/chokcoco/iCSS
