细节与特效 · 耐看的小细节
故障抖动Glitch
- 信号不良
- 错位
- 分裂
元素像信号不良的屏幕那样抽搐：整体瞬间跳几像素、颜色分成红蓝两层错开、偶尔有一条横带被切开错位。这三件事必须同时发生才像故障 —— 只跳位置是抖动，只错颜色是重影，只有横带是撕裂。
什么时候用它
用在科技感、赛博、故障艺术的场合 —— 标题、加载、错误页。正文和表单里绝对不要用：它在说的是「这东西坏了」，而用户会真的以为坏了，然后不敢点。
参数
transform: translate3d ±3px · clip-path: inset 3 slices · text-shadow: -2px→2px rgb split · 460ms steps(9, end)
配方
故障抖动 → transform: translate3d ±3px · clip-path: inset 3 slices · text-shadow: -2px→2px rgb split · 460ms steps(9, end)
给 AI 的一句话
做一个故障抖动：分成三层叠着 —— 底层是原色，上面两层各用 text-shadow 把红和青错开 ±2px；整体每帧随机 translate3d 跳 ±3px；再用 clip-path 把画面切成 3 条横带，每条随机错开。整段 460ms 用 steps(9, end)（不要插值，故障是跳变的）。