CSS3制作电脑屏幕故障时的闪动字体

思路：利用伪类重新生成同样的字体，且和原字体在竖直位置重合，在水平位置错开约2个px，利用动画使伪类的高度发生变化，同时利用一条直线跟随伪类高度的变化。

HTML代码

<div class="wrapper" data-word="hello world!">
    hello world!
    <div class="whiteLine"></div>
</div>

CSS样式

          body{
            background-color:darkseagreen;
            margin: 0;
            padding: 0;
        }
        .wrapper{
            position: relative;
            top: 300px;
            left: 300px;
            width:250px;
            font-size: 40px;
            line-height: 40px;
            height:40px;
        }
        .wrapper::after{
            content:attr(data-word);
            font-size: 40px;
            position: absolute;
            top: 0;
            left: -2px;
            overflow: hidden;
            animation:afterAnima 1.5s linear infinite;
        }

        @keyframes afterAnima {
            0%{
                height: 40px;
            }
            25%{
                height:30px;
            }
            50%{
                height: 20px;
            }
            100%{
                height: 10px;
            }
        }
        .wrapper::before{
            content:attr(data-word);
            font-size: 40px;
            position: absolute;
            top: 0;
            left: -2px;
            overflow: hidden;
            animation:beforeAnima 1.5s linear infinite;

        }

        @keyframes beforeAnima {
            0%{
                height: 20px;
            }
            25%{
                height:30px;
            }
            50%{
                height: 40px;
            }
            100%{
                height: 10px;
            }
        }
        @keyframes whiteLineAnima {
            0%{
                bottom: -3px;
            }
            25%{
                bottom:7px;
            }
            50%{
                bottom: 17px;
            }
            100%{
                bottom: 27px;
            }
        }
        .whiteLine{
            width:100%;
            height: 2px;
            background-color: darkseagreen;
            position: absolute;
            left:0;
            bottom:-3px;
            animation:whiteLineAnima 1s ease-out infinite ;
        }