共计 1925 个字符,预计需要花费 5 分钟才能阅读完成。
什么是 故障(Glitch)动画效果?你是否见过电视机或显示器发生故障时画面的抖动效果,那就是故障动画效果。来看下面的一个例子(将鼠标放在下面的文字上看看效果):
Glitch
制作 Glitch 故障效果
可以使用任意 HTML 元素来创建的一个文字,这里使用一个 <span>
元素。
<span class="glitch">Glitch</span>
制作 glitch 故障动画使用的技术是 CSS 的 :before
和:after
伪元素。
分别使用:before 和:after 伪元素来制作原文字的两个抖动图层效果。
为文字设置基本的 CSS 样式。设置文字的字体大小,粗细,颜色和定位等。
.glitch {
font-size: 130px;
line-height: 1;
font-family: sans-serif;
font-weight: 700;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
text-decoration: none;
color: #fff;
}
然后通过 :before
和:after
伪元素来创建两个不同颜色的文字副本。注意创建 :before
和:after
伪元素时,它们的 content
属性要和原文字相同,这里是 content: 'Glitch';
。并且这两个伪元素的z-index
要低于原文字,使它们显示在原文字的背后。
.glitch:before, .glitch:after {
display: block;
content: 'Glitch';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: .8;
}
.glitch:after {
color: #f0f;
z-index: -2;
}
.glitch:before {
color: #0ff;
z-index: -1;
}
接下来要制作鼠标滑过文字时的效果。目前,原文字和它的两个伪元素是相互堆叠在一起的。为了制作移动效果,这里采用 keyframes 帧动画。一共 6 共动画帧,每一帧都使用 transform: translate
属性来移动元素。
@keyframes glitch {
0% {transform: translate(0)
}
20% {transform: translate(-5px, 5px)
}
40% {transform: translate(-5px, -5px)
}
60% {transform: translate(5px, 5px)
}
80% {transform: translate(5px, -5px)
}
to {transform: translate(0)
}
}
开始和结束帧都是translate(0)
,这代表 3 个元素在每次动画开始和结束时,都是相互重叠在初始位置的。
我们在鼠标滑过(悬停)时触发 glitch 动画:
.glitch:hover:before {animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:hover:after {animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}
注意上面的 animation 属性是一个简写的动画属性,上面的 animation 代码实际上包含了 5 个具体的 CSS animation 动画属性:
- animation-name
- animation-duration
- animation-timing-function
- animation-fill-mode
- animation-iteration-count
关于这 CSS animation 动画属性的描述,可以参考CSS 属性参考 | animation。
在这个故障(glitch)动画中,两个伪元素都执行了 glitch
动画,动画持续时间(animation-duration)都是 0.3 秒,easing 动画(animation-timing-function)效果都是自定义的贝兹曲线,animation-fill-mode
都是both
,最后动画重复次数(animation-iteration-count)都是无限(infinite)。
为了制作更杂乱无章的效果,:after
伪元素还设置了 animation-direction
动画方向为反向动画(reverse
)。
一个完整的故障(glitch)动画效果制作完成了。为了使大家更清楚的了解整个 glitch 动画的过程,下面特意制作了一个“慢动作”版本的 glitch 动画。
Glitch