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实现的线条光影效果--，⾮常的有意思：
但是由于源代码是使⽤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);
}
我们将得到可见部分图案的多重阴影叠加效果：
我们将上述例⼦的⿊⽩颜⾊对换⼀下，就能得到⼀副很有意境的图案，像是在深邃的太空中看某个透光的星球般：
实现⼼形线条动画
接下来，就是实现⼼形线条动画了，这点利⽤SVG还是⽐较简单的。关于SVG线条动画，之前也有多次提及，感兴趣的同学也可以看看这两篇⽂字：
我们⾸先需要得到⼀个利⽤SVG
这⾥我借助了这个⼯具得到⼀个⼼形的Path路径：
通过⼯具，快速绘制想要的形状，拿到对应的Path：
核⼼就是拿到这⼀段SVGPath路径：
M400160A229000260160A229000120160C120350C260160
有了它，利⽤SVG的stroke-dasharray和stroke-offt，我们可以轻松的得到⼀个⼼形追逐动画：
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-dashofft:0;
}
100%{
stroke-dashofft:928;
}
}
简单解释上上述代码：
两个相同的SVG图形，通过stroke-dashofft将完整的线条图形截成部分
通过stroke-dashofft的从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实现的效果：
完整的代码，你可以猛击--
扩展延伸
当然，掌握了上述的技巧后，还有⾮常多有意思的效果我们可以去探索实现的，这⾥我简单的抛砖引⽟。罗列两个我⾃⼰尝试的效果。
其中⼀⼤类是运⽤于按钮之上，可以实现按钮带光影的按钮效果，下图是其中⼀个的⽰意，巧妙运⽤stroke-dashofft，它可以有⾮常多的变形：
完整源代码可以猛击
当然，我们也不是⼀定要借助SVG，仅仅是HTML+CSS也是可以运⽤这个效果，利⽤它实现⼀个简单的Loading效果：
完整源代码可以猛击
最后
好了，本⽂到此结束，希望对你有帮助
本文发布于:2022-12-11 06:41:10，感谢您对本站的认可！
本文链接：http://www.wtabcd.cn/fanwen/fan/88/84084.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
