任务路径 / 从输入到结果
如何制作 CSS 文字故障效果
- 01
输入预览文本
在“预览文本”中输入 1–32 个字符——标签旁的计数器会实时显示长度。短而宽的词在图层开始分裂后最易读。
- 02
设置三种颜色
“文本颜色”绘制基础图层；“青色通道”和“红色通道”是产生色差边缘的两个偏移副本。
- 03
调整故障动效
“图层偏移”（1–12 px）决定副本漂移的距离，“循环时长”（0.2–3 s）决定循环速度。预览会实时演示三个图层的叠加。
- 04
理解三个图层
基础元素保持你的文本颜色，青色副本被裁剪到行顶，红色副本被裁剪到行底。每个副本运行 steps(2, end) 动画——硬跳动而不是平滑滑动——这正是故障效果像信号干扰的原因。
- 05
复制故障效果 CSS
点“复制 CSS”，或点“下载 .css”保存 toolars-text-glitch.css。副本通过 content: attr(data-text) 读取内容，所以你的元素需要一个与文本一致的 data-text 属性；减弱动效的媒体查询会保留一道静态色差边缘。
- 06
添加 data-text 属性
副本层从 attr(data-text) 读取内容，所以你的元素需要一个与可见文字完全相同的 data-text 属性。以后文案变化时两处都要更新——青色和红色图层实际绘制的正是这个属性。属性与类在同一个元素上，整个效果保持单标签。