故障艺术，英文名称叫glitch，在很多赛博朋克作品中经常看到，其实就是故意表现一种显示设备的小故障效果，抖音的图标其实就是这种的效果，我们看下这个图标

这个图标中的红色和蓝色的偏移其实就是一种故障艺术，看到这个，我就能想到早年我家还没有有线电视时，摇天线对电视信号的场景，信号一差就是对着电视一阵拳打脚踢，现在看到这种艺术效果颇为怀念。

某甲：为啥我没遇到过这种场景？

我：你把手里的平板扔地上就能看到了。

某甲：（土豪动作完成）我摔了，咋还没看到呢

我：我就打个比方，你何必当真...

某甲：我一定要看到！

我：要不你再跺几脚...

----------------------------------------我是打算开始的分割线------------------------------------------

我们先来实现一个动态的抖音故障效果，首先我们要有一个干净的抖音图标，我是从阿里巴巴矢量图标库找的，因为它家支持SVG格式，得到的SVG代码是这样的。

<svg id="douyin" t="1570181112474" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2916" width="128" height="128"> <path d="M937.386667 423.850667a387.84 387.84 0 0 1-232.874667-77.824v352.341333C704.512 878.250667 565.930667 1024 394.922667 1024S85.333333 878.250667 85.333333 698.368c0-179.882667 138.581333-325.632 309.589334-325.632 17.066667 0 33.706667 1.450667 49.92 4.266667v186.624a131.754667 131.754667 0 0 0-48.64-9.216c-76.288 0-138.154667 65.024-138.154667 145.322666 0 80.213333 61.866667 145.322667 138.24 145.322667 76.202667 0 138.069333-65.109333 138.069333-145.322667V0h172.714667c0 134.485333 103.68 243.541333 231.594667 243.541333v180.309334h-1.28" p-id="2917"></path> </svg>

看到的图形是这样子的

注意，在SVG的代码里面是没有设置颜色的，图片里面的黑色是为了让大家看清楚。我们先把白色，蓝色和红色的三层抖音图标先显示出来，代码如下：

<use xlink:href="#douyin" x="0%" y="10%" class="douyin1" /> <use xlink:href="#douyin" x="0%" y="10%" class="douyin2" /> <use xlink:href="#douyin" x="0%" y="10%" class="douyin" />

/* 白色 */ .douyin { fill: #fff; } /* 蓝色 */ .douyin1 { fill: #25f4ee; } /* 红色 */ .douyin2 { fill: #fe2c55; }

分别填上了白色，红色和蓝色，在SVG里面，后面的会覆盖前面的，所以把白色放在最前面，因为现在三者的位置是重叠的，所以只能看到白色的。

我们再设置白色的动画效果

@keyframes glitch1 { 0% { transform: none; opacity: 1; } 7% { transform: skew(-2.5deg, -0.9deg); opacity: 0.75; } 10% { transform: none; opacity: 1; } 27% { transform: none; opacity: 1; } 30% { transform: skew(1.8deg, -0.1deg); opacity: 0.75; } 35% { transform: none; opacity: 1; } 52% { transform: none; opacity: 1; } 55% { transform: skew(-1deg, 1.2deg); opacity: 0.75; } 60% { transform: none; opacity: 1; } 72% { transform: none; opacity: 1; } 75% { transform: skew(0.4deg, -1deg); opacity: 0.75; } 80% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }

白色的动画效果很小，因为我只做了一些轻微的倾斜效果，感觉画面在抖动，用的是 transform: skew(）。transform是css的一个属性，主要设置的是变形效果，这边用的skew是实现倾斜效果。另外还用opacity做了些透明度的处理，用来表现信号故障时的亮度变化。

我们接着设置蓝色图标的动画效果：

@keyframes glitch2 { 0% { transform: none; opacity: 0.25; } 7% { transform: translate(-4px, -6px); opacity: 0.5; } 10% { transform: none; opacity: 0.25; } 27% { transform: none; opacity: 0.25; } 30% { transform: translate(-7px, -4px); opacity: 0.5; } 35% { transform: none; opacity: 0.25; } 52% { transform: none; opacity: 0.25; } 55% { transform: translate(-5px, -2px); opacity: 0.5; } 60% { transform: none; opacity: 0.25; } 72% { transform: none; opacity: 0.25; } 75% { transform: translate(-4px, -6px); opacity: 0.5; } 80% { transform: none; opacity: 0.25; } 100% { transform: none; opacity: 0.25; } }

这里同样是使用transform变形，但用的效果是translate，官方的名称是2D转换，其实就