Glitch Text 故障文字
Two copies of the text stacked on the original, each shaking on its own offset keyframe. 文字叠了两层副本，各自跑一份错位的抖动关键帧。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
::before and ::after both pull their content from attr(data-t), so the text exists once in markup but renders three times. One copy is pink and runs the shake animation forward, the other is teal and runs it in reverse — the mismatch between them is what reads as a signal fault. ::before 和 ::after 都用 attr(data-t) 取内容，所以文案在 HTML 里只写一次、却渲染三遍。一层粉色正向播抖动，一层青色反向播——两层错位的那一点，就是「信号故障」的来源。
What to change可以改的地方
- 1Raise the translate values from 3px to 8px for a much more violent glitch.
- 2Add a clip-path band to one copy so only a horizontal slice jitters, like a dropped scanline.
- 1位移从 3px 加到 8px，故障感会猛烈得多。
- 2给其中一层加 clip-path 只留一条横带，就只有一条扫描线在抖，更像掉帧。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑，不需要任何库。