css故障文字动画

免费分享95套java实战项目，不仅有源码还有对应的开发视频，关注公众号『勾玉技术』回复“95”即可获取

首先给内容上hover和before，

.glitch:hover:before {
    text-shadow: 4px 0 #ff3f1a;
    animation: glitch-loop-1 .8s infinite ease-in-out alternate-reverse;
}

然后是hover和after：

.glitch:hover:after {
    text-shadow: -5px 0 #00a7e0;
    animation: glitch-loop-2 .8s infinite ease-in-out alternate-reverse;
}

定义好动画glitch-loop-1：

@-webkit-keyframes glitch-loop-1{0%{clip:rect(36px,9999px,9px,0)}25%{clip:rect(25px,9999px,99px,0)}50%{clip:rect(50px,9999px,102px,0)}75%{clip:rect(30px,9999px,92px,0)}100%{clip:rect(91px,9999px,98px,0)}}
@keyframes glitch-loop-1{0%{clip:rect(36px,9999px,9px,0)}25%{clip:rect(25px,9999px,99px,0)}50%{clip:rect(50px,9999px,102px,0)}75%{clip:rect(30px,9999px,92px,0)}100%{clip:rect(91px,9999px,98px,0)}}

单独的before：

.glitch:before {
    left: -1px;
    text-shadow: 1px 0 #ff3f1a;
}

单独的after:

.glitch:after {
    left: 1px;
    text-shadow: -1px 0 #00a7e0;
}

共同：

.glitch:after, .glitch:before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    width: 100%;
    background: rgba(0,0,0,0);
    clip: rect(0,0,0,0);
}