本文将介绍CSS过滤器的使用来实现HTML元素和SVG元素部分的阴影效应，以实现各种场景的凉爽和阴影效果。通过本文，您可以学习：
有一天，当我访问Codepen时，我发现了Webgl -Neon Love非常有趣的线条效果，这很有趣：
但是，由于源代码是用WebGL完成的，因此通过GLSL颜色设备和其他代码绘制了如此简单的效果，接近300行。
那么，我们可以使用HTML（SVG）+CSS实现它吗？
首先，要达到上述效果，一个非常重要的步骤是将阴影添加到元素的某些内容中。
假设我们有这样的图形：
我们设置此DIV图形并添加一个：
结果如下：
如果我希望，只需在此弧线上添加阴影，然后尝试使用：
Emm，显然不是，阴影将被添加到整个Div中：
为了解决这种情况，聪明的同学会立即认为它是为了解决这个问题而诞生的。该属性会在整个元素的整个帧后面创建一个矩形阴影，并且过滤器是要与图像本身（Alpha Channel）一致创建一个形状。
好的，我们使用替换：
这样，我们可以得到符合图像本身形状的阴影（alpha频道）：
此外，它还可以多次使用它来获得类似于阴影的多个阴影效果：
我们将获得一些可见模式的多个阴影叠加效果：
当我们更改上面示例的黑色和白色时，我们可以获得非常艺术的模式，例如在深空中观看光线传输的星球：
codepen demo-multi跌落阴影霓虹灯
接下来，它是为了实现心形动画，使用SVG相对简单。标记SVG线动画，我以前已经提到过很多次。有兴趣的学生还可以阅读这两个文本：
我们首先需要获得使用SVG的心形。我们可以选择自己绘制SVG路径，或使用一些工具来完成它。
在这里，我使用此工具来获取心形路径：svgpatheditor
通过工具，快速绘制所需形状，获取相应的路径：
核心是获取SVG路径的这一部分：
有了它，使用SVG的和平，我们可以轻松获得心形的追逐动画：
只需解释以上代码：
效果如下：
通过上述两个步骤，这一步骤非常了解。
最后，我们只需要给出两条SVG线即可使用具有不同颜色的多个阴影：
最后，我们使用SVG + CSS几乎完美地恢复了使用WebGL实现的效果：
有了完整的代码，您可以激烈地击中-CSS Inspiration -SVG与Drop -shadow合作以实现线光和阴影效果
当然，在掌握了上述技能之后，我们仍然可以探索并实现许多有趣的效果。在这里，我只是扔了砖头。我自己尝试了两个效果。
按钮上使用了主要类别之一，该按钮可以通过灯光和阴影实现按钮的按钮效果。下图是茎之一。它可以巧妙地使用。它可能有很多变形：
完整的源代码可以按CODEPEN -NEON LINE按钮
当然，我们不必使用SVG。只有HTML + CSS也可以使用此效果来实现简单的负载效果：
完整的源代码可以击中codepen -neon加载
好的，这是本文的结尾，希望它对您有所帮助:)
如果您有任何疑问或建议，您可以进行更多的交流，原始文章和写作仅限于学习浅。