Glitchart，英文名glitch，在很多赛博朋克作品中经常看到。事实上，它是故意显示显示设备的毛刺效应。抖音的图标其实就是这种效果。我们来看看这个图标。这个图标中红蓝的偏移其实是一种故障艺术。看到这里，我就能想起早年家里没有有线电视的时候，天线转成电视信号的场景，信号不好的时候，电视就会被拳打脚踢。现在看到这种艺术效果，还是挺怀念的。A：为什么我没有遇到过这样的场景？我：你把手里的平板往地上一扔就可以看到了。A：（土豪动作完成）我摔倒了，怎么还没看到？我：要不你再跺几下……--------------------------------------我是我打算开始的分界线------------------------------------------让我们首先实现一个动态的抖音毛刺效果。首先，我们需要一个干净的抖音图标。我是从阿里巴巴的矢量图标库中找到的，因为它支持SVG格式。我得到的SVG代码是这样的。你看到的图形不是这个代码注意在setting中有颜色，图中的黑色是大家看得清楚的。我们先展示白蓝红三层的抖音图标，代码如下：/white/.douyin{fill:#fff;}/blue/.douyin1{fill:#25f4ee;}/red/.douyin2{fill:#fe2c55;}分别填入白色，红蓝，在SVG中，后面会盖住前面，所以把白色放在前面，因为现在三者的位置重叠了，所以只能看到白色。让我们再次设置白色动画效果@keyframesglitch1{0%{transform:none;不透明度：1；}7%{变换：偏斜（-2.5deg，-0.9deg）；不透明度：0.75；}10%{转换：无；不透明度：1；}27%{转换：无；不透明度：1；}30%{变换：倾斜（1.8度，-0.1度）；不透明度：0.75；}35%{转换：无；不透明度：1；}52%{转换：无；不透明度：1；}55%{变换：偏斜（-1deg，1.2deg）；不透明度：0.75；}60%{转换：无；不透明度：1；}72%{转换：无；不透明度：1；}75%{变换：倾斜（0.4度，-1度）；不透明度：0.75；}80%{转换：无；不透明度：1；}100%{转换：无；不透明度：1；}}white动画效果很小，因为我只做了一些轻微的倾斜效果，感觉画面在晃动，使用了transform:skew()。transform是css的一个属性，主要设置变形效果，这里使用的skew是为了实现倾斜效果。另外使用opacity做一些透明处理，表现出信号失效时的亮度变化。然后我们为蓝色图标设置动画：@keyframesglitch2{0%{transform:none;不透明度：0.25；}7%{变换：平移（-4px，-6px）；不透明度：0.5；}10%{转换：无；不透明度：0.25；}27%{转换：无；不透明度：0.25；}30%{转换：翻译（-7px，-4px）；不透明度：0.5；}35%{转换：无；不透明度：0.25；52%{转换：无；不透明度：0.25；}55%{转换：翻译（-5px，-2px）；不透明度：0.5；}60%{转换：无；不透明度：0.25；}72%{转换：无；不透明度：0.25；}75%{转换：翻译（-4px，-6px）；不透明度：0.5；}80%{转换：无；不透明度：0.25；}100%{转换：无；不透明度：0.25；}}这里也使用了Transform，但是使用的效果是translate。官方名称是2Dtransformation，其实就是平移效果。它可以水平和垂直移动。我们可以看到抖音的图标。蓝色部分在白色图标中。左上，所以设置的translate值都是负的，就是左上的翻译。红色部分类似，只是translate的值都是正数，表示右下翻译。代码如下：@keyframesglitch3{0%{transform:none;不透明度：0.25；}7%{转换：翻译（4px，6px）；不透明度：0.5；}10%{转换：无；不透明度：0.25；}27%{转换：无；不透明度：0.25；}30%{转换：翻译（7px，4px）；不透明度：0.5；}35%{转换：无；不透明度：0.25；}52%{转换：无；不透明度：0.25；}55%{变换：平移（5px，2px）；不透明度：0.5；}60%{转换：无；不透明度：0.25；}72%{转换：无；不透明度：0.25；}75%{转换：翻译（4px，8px）；不透明度：0.5；}80%{转换：无；不透明度：0.25；}100%{转换：无；不透明度：0.25；}}最后在css类中添加动画效果，将之前的css代码改为this.douyin{fill:#fff;/*动画*/animation:glitch13sinfinite;}.douyin1{fill:#25f4ee;animation:glitch23sinfinite;}.douyin2{fill:#fe2c55;animation:glitch33sinfinite;}动画效果设置为3秒，无限循环，最终成品效果如下：在线效果请移步codepen.io--------------------------------------------和高级效果分割线----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------抖音官方图标的动态效果，但是作为一个赛博朋克艺术家（是的，我已经做了几个星期的艺术家），我觉得这个效果很in符合抖音的气质，但距离我想象中的高大上还有很长的路要走，所以决定多加点效果，让它更赛博朋克。在这里，我将使用负责任的svg过滤器。代码如下：这是一个组合滤镜效果，具体分工如下：feTurbulence使用Perlin噪声函数创建图像。实现了云纹、大理石纹等人工纹理的合成。以前做云朵的时候用过。这里主要是达到干扰信号的效果。feColorMatrix根据转换矩阵转换颜色。在这里，可以混合白色、蓝色和红色，以产生三种颜色叠加的颜色干涉效果。feDisplacementMap其实就是一个position替换一个filter就是改变元素和图形的像素位置。这里将抖音图标的位置（SourceGraphic）和feColorMatrix/feTurbulence滤镜改变后的结果，得到干涉效果的最终结果。最后，我们将这个滤镜添加到动画效果中。我们拿三个关键帧中的一个来看代码，其他两个也是一样的。@keyframesglitch1{0%{变换：无；不透明度：1；}7%{变换：偏斜（-2.5deg，-0.9deg）；过滤器：网址（#filter）；不透明度：0.75；}8%{过滤器：无；}10%{转换：无；不透明度：1；}27%{转换：无；不透明度：1；}30%{变换：倾斜（1.8度，-0.1度）；过滤器：网址（#filter）；不透明度：0.75；}31%{过滤器：无；}35%{转换：无；不透明度：1；}52%{转换：无；不透明度：1；}55%{变换：偏斜（-1deg，1.2deg）；过滤器：网址（#filter）；不透明度：0.75；}56%{过滤器：无；}60%{转换：无；不透明度：1；}72%{转换：无；不透明度：1；}75%{变换：倾斜（0.4度，-1度）；过滤器：网址（#filter）；不透明度：0.75；}76%{过滤器：无；}80%{转换：无；不透明度：1；}100%{转换：无；不透明度：1；}}filter:url(#filter)这句话就是调用svgfilter的语句。注意每次调用这个的时候，语句31%{filter:none;}将在最后添加。这是为了使滤镜效果瞬间出现和消失，使故障效果更加逼真。最终效果如下：在线效果请看codepen.io源码请看这里
