如何使用cssfilter的drop-shadow()函数创建线条光影效果

如何使用css filter的drop-shadow()函数创建线条光影效果，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联建站主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、全网营销推广、网站程序开发、HTML5响应式网站建设、手机网站制作设计、微商城、网站托管及成都网站维护公司、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为自上料搅拌车行业客户提供了网站营销服务。

下面将介绍一种利用 CSS 滤镜 filter 的 drop-shadow()，实现对 HTML 元素及 SVG 元素的部分添加阴影效果，以实现一种酷炫的光影效果，用于各种不同的场景之中。

使用 WebGL 实现的线条光影 Neon 动画

某天在逛 CodePen 的时候，发现了一个非常有意思的，使用 WebGL 实现的线条光影效果 -- NEON LOVE，非常的有意思

但是由于源代码是使用 WebGL 完成，绘制如此简单的一个效果，通过 GLSL 着色器等代码，接近了 300 行。

那么，我们能否使用 HTML(SVG)+CSS 实现它呢？

利用 drop-shadow 对元素的部分内容添加单重及多重阴影

首先，要实现上述效果，很重要的一步是给元素的部分内容添加上阴影。

假设我们有这样一个图形：

我们给这个 div 图形设置 border-radius: 50%，并且添加一个 border-top：

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

如果我希望，仅仅只给这个圆弧添加阴影，尝试使用 box-shadow：

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

emm，明显是不行的，阴影会加给整个 div

为了解决这种情况，聪明的同学会立马想到 filter: drop-shadow()，它就是为了解决这个问题而诞生的，box-shadow 属性在元素的整个框后面创建一个矩形阴影, 而 drop-shadow() 过滤器则是创建一个符合图像本身形状(alpha 通道)的阴影。

好，我们使用 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);
}

这样，我们就能得到符合图像本身形状(alpha 通道)的阴影

并且，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);
}

我们将得到可见部分图案的多重阴影叠加效果

我们将上述例子的黑白颜色对换一下，就能得到一副很有意境的图案，像是在深邃的太空中看某个透光的星球般：

CodePen Demo -- multi drop-shadow Neon

实现心形线条动画

接下来，就是实现心形线条动画了，这点利用 SVG 还是比较简单的。

我们首先需要得到一个利用 SVG 实现的心形形状，可以选择自己绘制 SVG 路径，也可以借助一些工具完成。

这里我借助了这个工具得到一个心形的 Path 路径：SVGPathEditor

通过工具，快速绘制想要的形状，拿到对应的 Path

核心就是拿到这一段 SVG Path 路径：

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 的 stroke-dasharray 和 stroke-offset，我们可以轻松的得到一个心形追逐动画：