起源
这是制作呼吸光动画时遇到的一个问题，即如何为SVG图形元素添加一些阴影效果，如外发光、内发光、投影等。 之前我也很困惑，但是还没有解决。 实在不行，所以暂时搁置了。 对于灯光的疗效，对于CSS3来说，非常简单。 一个box-shadow属性就可以解决所有问题。 我之前写过一篇关于CSS3样式的文章。 UI设计师进阶技巧——CSS3样式。 特别全面，包括每个参数怎么和PS一一对应。 您不仅可以设置外阴影或内阴影、大小、X和Y的倾斜度，还可以叠加多种效果。 玩得好之后，把它当作作者郁金香都是可以的。
盒子阴影的局限性
这是为了直接定义 100*100 div bag 的外发光效果。 为了方便改变颜色，使用了hsla的颜色值表示。
<code class="hljs css" lang="css">#box{
height:100px;
width:100px;
background: hsla(168,90%,45%,1);
border-radius: 50px;
box-shadow:0 0 70px hsla(168,90%,45%,1);
}
为了获得完美的外发光效果，尝试在动画规则中定义box-shadow属性，会发生什么：
/*定义一个透明度变化（hsla的a值改变）动画规则*/
@keyframes outLight{
0%{box-shadow:0 0 70px hsla(168,90%,45%,1)}
100%{box-shadow:0 0 70px hsla(168,90%,45%,0.1)}
}
#box {
height:100px;
width:100px;
background: hsla(168,90%,45%,1);
border-radius: 50px;
animation: outLight 1s ease infinite;
}
通过这些透明度变化创建的“重击”动画可以轻松实现。 然后再次尝试更改颜色。 为了节省一条动画规则，我不会用任何背景颜色填充包，只保留盒子阴影的效果。 之所以采用hsla颜色值也是为了方便调整颜色，只需改变h值即可。
/*定义一个颜色变化（hsla的h值改变）动画规则*/
@keyframes outLight{
0%{box-shadow:0 0 70px hsla(168,90%,45%,1)}
100%{box-shadow:0 0 70px hsla(220,90%,45%,1)}
}
#box {
height:100px;
width:100px;
border-radius: 50px;
animation: outLight 0.7s linear alternate infinite;
}
变色也很OK，我不会尝试改变其他值。
这里我尝试制作一排依次亮起的信号灯，并且同时有四种不同的颜色。
这里，如果我要做一个圆环的外发光效果，抱歉，box-shadow属性告诉你，这是一个幻想，因为从字面上来说，一个盒子——一个盒子，作为一个包的模型，支撑着一个整体的外观，或称为边际功效。
投影滤镜的补充
Drop-shadow正是滤镜滤镜的一种，常见的还有模糊滤镜blur、黑白滤镜灰度等，这次我只讲这个投影。 语法很简单：
.box {
height:100px;
width:100px;
border-radius:50px;
/*filter:drop-shadow 滤镜*/
filter: drop-shadow(0 0 30px hsla(168,90%,45%,1));
background-color: hsla(168,90%,45%,1);
}
也可以获得完美的外发光效果，但是这里有一个大坑，就是会受到元素填充颜色的影响，比如改变背景色background-color的透明度：hsla(168 ,90%,45%,0.2)，你会发现投影的效果也会发生变化。
drop-shadow滤镜不支持像box-shadow属性那样多个设置的叠加，因为虽然滤镜是一个属性，但是只能设置一个投影滤镜。但是，由于滤镜是添加到实体上的，所以并不是受哪些包包型号的影响，所以当我的包包是面膜而不是填充款式时
filter: drop-shadow(0 0 8px hsla(168,90%,45%,1));
border:10px solid hsla(168,90%,45%,1);
您将获得一枚内外发光的戒指。
这种与SVG的搭配可以说是不利的。 比如你想给下面复杂的SVG图形添加投影，就让SVG直接使用定义的滤镜即可。
原本是一个普通的平面SVG图形，但是添加了filter="drop-shadow(0 10px 5px hsla(168,0%,45%,0.4))"的定义后，瞬间就出现在了纸上。 而投影的边缘正是图形的边缘，这是 box-shadow 属性无能为力的。
让我们尝试一下对动漫的支持。
/*定义一个投影效果透明度变化（hsla的a值改变）动画规则*/
@keyframes outLight{
0%{filter: drop-shadow(0 0 10px hsla(168,90%,45%,1))}
100%{filter: drop-shadow(0 0 10px hsla(168,90%,45%,0.1))}
}
您仍然可以获得动画。 不会变色，也支持。
现在，新的要求又来了。 我想为 SVG 中的图形元素添加投影。 首先，我声明单个图形元素不支持使用 drop-shadow 滤镜属性。 我也踩过这个坑，请问有什么办法吗？ 有。
SVG 定制 feDropShadow 投影滤镜
上面的投影滤镜就是CSS的滤镜属性。 它只能将SVG视为整个图片元素。 最终目标是SVG+CSS3的动画吧？ 这需要 SVG 上图形元素的单独属性参数。 SVG 的强大元素可以使这一切成为现实。 我们要做的就是首先定义一个id为outLight的滤镜，语法如下：
<defs>
<filter id="outLight">
<feDropShadow dx="0" dy="0" stdDeviation="10" flood-color="hsla(180,90%,40%,0.9)" />
</filter>
</defs>
这里有一些特殊的句型，dx和dy通过字面意思很容易理解，即水平和垂直偏转距离，steDeviation有什么属性呢？ 看看MDN文档中对steDeviation的官方解释：
stdDeviation 属性定义模糊操作的标准偏差。
简单来说，就是投影的规范。
对于颜色的定义，属性名称是flood-color。 同样，如果没有hsla或rgba等颜色值表示方法有自己的透明度定义，如果需要调整透明度，则通过flood-opacity属性来定义。
我使用了一个蒙版的方块，通过filter:url(#outLight)语句来调用这个滤镜，但是效果并不理想：
外发光效果的实现没有问题，但是很明显css3图片投影，虽然滤镜工作的区域被截取了。 追根溯源查找原因，filter的属性值写法如下：
过滤器的位置和尺寸可以使用以下参数来指定：x、y、宽度、高度。 默认值为：
简而言之，过滤器的默认范围是所使用元素的 10% 溢出。 在这种情况下css3图片投影，由于发光范围较大，显然10%的溢出是不够的。 既然默认值不合理，那就重新定义一次
<filter id="outLight" x="-50%" y="-50%" width="200%" height="200%">
本例中，我给出了200%的溢出范围，解决了外部光的直径超出默认活动区域的问题。
获得完美的外发光环。
可以随意改变dx和dy的值，比如如下：
甚至让投影完全脱离身体
延伸：过滤器过滤器能做什么？
在详细了解滤镜之前，我还是将SVG定位为矢量图形，结合最多的就是平面风格的插画。 但是当我使用滤镜工具时，我突然意识到SVG可以用来让黑色填充的图形看起来有纹理，比如减少纹理，比如减少圆形雕塑的效果。
下图这样看确实不起眼。 这是我用AI画出的基本形状。
Burning Goose，当我按照下面的视口进行分割然后添加相应的滤镜效果时
下面是见证奇迹的时刻：
看看圆雕的凹凸效果，看看上面质朴的纹理，是不是很难想象，在SVG中，只是通过下面两个滤镜定义来实现的：
<filter filterUnits="objectBoundingBox" id="noise">
<feTurbulence baseFrequency="0.5" id="c2" in="c1" numOctaves="10" result="c2" stitchTiles="noStitch" type="fractalNoise">
</feTurbulence>
<feComposite in="c2" in2="SourceAlpha" operator="in"></feComposite>
</filter>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
放几个最终的疗效来展示一下方法：
旋转疗法
闪烁效果：
要想深入了解，应该有很多有趣的东西。 目前我能完全理解的只有投影和模糊。 当我完全理解之后，我会单独来一个主题介绍过滤器。 因为投影完全可以跟随本体的变化，比如最简单的随意缩放：
另外，借助滤镜制作运动效果的想法还在思考中，这是另一篇文章了。
总结
发表评论