[分享]css3故障文字动画

CSS3故障文字动画：炫酷的故障感受

/* 让我们开始吧！*/

/* 首先，我们先来定义一个容器 */
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30rem;
  height: 15rem; /* 这个可以根据自己的需求进行调整 */
  overflow: hidden;
  /* 为了让我们的 "故障效果" 能够正常运行，而不是溢出容器外面去，所以我们需要隐藏一下超出容器的部分 */
}

/* 接下来，让我们定义一下我们的文本 */
.text {
  position: relative; /* 这个是要和 .glitch 渲染位置一致 */
  font-size: 8rem; /* 同样可以根据自己的需求进行调整 */
  font-weight: bold;
  font-family: Arial, sans-serif; /* 这个可以更改成你喜欢的字体 */
  color: #fff; /* 文本颜色 */
  text-align: center; /* 让文本始终居中 */
  text-transform: uppercase; /* 强制转换成大写字母 */
}

/* 然后，我们要定义一下我们自己制作的 "故障效果" */
.glitch:before,
.glitch:after {
  content: attr(data-text); /* 使用 data-text 属性来避免使用伪元素造成的性能问题 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(4px); /* 模糊效果 */
}

/* 让我们再来定义一下我们的 "故障效果" 的动画效果 */
@keyframes glitch-anim {
  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);
  }
}

/* 最后，我们把这些东西组合在一起 */
.glitch:before {
  color: #ff00f0; /* 故障效果的文本颜色，可以自行更改 */
  animation: glitch-anim 0.1s infinite;
  mix-blend-mode: difference; /* 这个是使故障效果和背景色产生对比 */
}

.glitch:after {
  color: #00f6ff; /* 故障效果的文本颜色，可以自行更改 */
  animation: glitch-anim 0.15s infinite;
} 

通过以上代码，我们就完成了CSS3故障文字动画的效果了。故障效果最主要的特点就是产生了 "抖动" 的效果，因此看起来非常的具有视觉冲击力。如果在正确的场景和时机下使用，那么它会让你的网站或者是应用非常的与众不同。