CSS实现故障风格文字动画

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196997.html

1. 标签元素部分
2. @keyframes 部分
3. 具体样式

今天分享一个用 css3 来实现一个最近特别流行的故障风格的文字展示动画，我敢说，只要你在你的项目中用到这个动画，面试官看到了一定会眼前一亮。下面先来看一下成品图：

在了解了蒙版的使用情况了以后，我们就通过 @keyframes 来设置逐帧动画，使蒙版的作用区域在垂直方向一直变化，实现上下抖动的效果，代码就如上所述

具体样式

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
}
.txt{
    display: inline-block;
    font-size: 65px;
    font-weight: 600;
    padding: 0 4px;
    color: white;
    position: relative;
}
.txt::before{
    /* 获取文本 */
    content: attr(data-text);
    position: absolute;
    /* 向左侧移 2px */
    left: -2px;
    width: 100%;
    /* 将背景色设为与主背景同样的颜色，用于遮挡我们的标签元素 */
    background: black;
    /* 给 before 伪元素的文本添加左侧 2px 大小的红色文字阴影 */
    text-shadow:2px 0 red;
    /* 应用蒙版垂直变化动画，并一直循环 */
    animation: animation-before 3s infinite linear alternate-reverse;
}
.txt::after{
    /* 获取文本 */
    content: attr(data-text);
    position: absolute;
    /* 向左侧移 2px */
    left: 2px;
    width: 100%;
    /* 将背景色设为与主背景同样的颜色，用于遮挡我们的标签元素 */
    background: black;
    /* 给 before 伪元素的文本添加右侧 2px 大小的蓝色文字阴影 */
    text-shadow: -2px 0 blue;
    /* 应用蒙版垂直变化动画，并一直循环 */
    animation: animation-after 3s infinite linear alternate-reverse;
}

这里，我们设置了两个伪元素 before 和 after，分别定位到跟父元素同样的位置，然后分别向左、右侧移一点点的距离，制作一个错位的效果，然后都将背景色设置为与父元素背景色一样的颜色，用于遮挡父元素。

然后设置了蒙版垂直变化动画以后，被蒙版遮挡的部分虽然看不到了，但是会露出下面一层的父元素内容，这样就可以实现了一个完美的故障风格的文字展示动画了。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/