红蓝错位抖动，赛博朋克风的故障美学
← 返回 文字 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .glitch{position:relative;text-align:center;font-size:44px;font-weight:800;color:#fff;margin:50px 0;font-family:monospace}
.fx .glitch::before,.fx .glitch::after{content:attr(data-t);position:absolute;top:0;left:0;width:100%}
.fx .glitch::before{color:#f778ba;animation:kfx-gl1 2.5s infinite}
.fx .glitch::after{color:#4a9eff;animation:kfx-gl2 2.5s infinite}
@keyframes kfx-gl1{0%,100%{transform:translate(0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,-2px)}80%{transform:translate(2px,2px)}}
@keyframes kfx-gl2{0%,100%{transform:translate(0)}25%{transform:translate(3px,2px)}50%{transform:translate(-3px,-2px)}75%{transform:translate(2px,-2px)}}<div class="fx">
<div class="glitch" data-t="GLITCH">GLITCH</div>
</div>