当前位置主页 > 资料库 > 前端教程 > 使用CSS3制作故障(Glitch)动画效果

使用CSS3制作故障(Glitch)动画效果

2017-05-15

什么是故障(Glitch)动画效果?你是否见过电视机或显示器发生故障时画面的抖动效果,那就是故障动画效果。来看下面的一个例子(将鼠标放在下面的文字上看看效果):

Glitch
制作Glitch故障效果

可以使用任意HTML元素来创建的一个文字,这里使用一个<span>元素。

<span class="glitch">Glitch</span>  

制作glitch故障动画使用的技术是CSS的:before:after伪元素。

css glitch效果中的伪元素示意图
分别使用: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
Previous:
上一篇:使用JavaScript制作打字机文本效果
Next:
下一篇:JavaScript实现十种经典排序算法

我要评论

返回顶部