CSS 故障文字效果（glitch）

功能

• 三档强度：偶尔跳一下 / 持续抖动 / 明显撕裂
• 两份副本的颜色可调，默认是青与品红（模拟色差）
• 预览里循环播放，悬停暂停以便看清某一帧
• 打字即可预览（工具提供文字输入框）
• 交付的代码含完整 CSS + `data-text` 的 HTML 说明
• 自动附上 `prefers-reduced-motion` 的处理
• 动画名带随机后缀，不会与项目里的同名关键帧冲突
• 下方代码带语法着色，复制按钮一步拿走
• 所有计算在浏览器本地完成

使用方法

1. 在上面的输入框里打几个字
2. 选强度：标题适合「重」，正文里的点缀用「轻」
3. 调两份副本的颜色，拉开色差会让撕裂感更强
4. 复制代码，记得给元素加上同名的 `data-text` 属性

常见问题

为什么复制走代码后副本是空的？

因为漏了 `data-text` 属性。两份副本是用 `content: attr(data-text)` 生成的 —— 它们取的是元素上那个属性的值，而不是元素里的文字。所以 HTML 必须写成 `<div class="glitch" data-text="同样的文字">同样的文字</div>`，两处一致。工具在预览里已经替你设置好了，但粘进项目时要自己加上，这是这类纯 CSS 效果唯一需要配合 HTML 的地方。

为什么用 `clip-path` 而不是真的做画面撕裂？

因为 CSS 里没有「撕裂」这个操作 —— 它能做的是裁切。所以思路反过来：先准备好错位的副本，再让每一份只露出几条水平条带（`clip-path: polygon(...)`），条带随时间改变位置与范围。眼睛看到「某些横条在错位」就会解读成信号故障。这是纯 CSS 能做到的近似，也正是这个效果在网页上通行的实现方式。

这个效果对可访问性有什么影响？

它是这批效果里对可访问性最不友好的一类，三点：一是文字在持续抖动，阅读困难，所以绝不能用在正文上；二是快速闪烁的内容对光敏感人群有风险（严重时可能诱发光敏性癫痫），交付的代码里已经用 `prefers-reduced-motion` 兜了一道；三是它必然抢注意力，用在旁边有内容的地方会让人分心。所以：只在标题、404 页、游戏风界面上用，且不要让它一直播。