AUTO · 自动演示
参数调改
PLAYGROUND
错位距离--offset_px
110
故障周期--dur_ms
16008000
文字字号--font_px
2872
双影色 A(冷)--glitch_a
双影色 B(暖)--glitch_b
主体文字色--text_color
实现要点
NOTES- 01
双影 = ::before/::after 配合 content: attr(data-text) 复用同一份文本,改文案只需同步 HTML 的 data-text 与内容两处;伪元素不进读屏树,h1 上的 aria-label 保证语义完整。
- 02
clip-path: inset(上 右 下 左) 只保留一条横带,配合 steps(1, end) 的时间函数让每段错位瞬间跳变,形成硬切 slices;双影的 keyframes 里大部分时间 opacity: 0,只在两个短窗口爆发,避免全程抖动造成视觉疲劳。
- 03
可读性设计:双影 z-index 为 -1/-2 压在主体文字下方,主体字形任何时刻完整在最上层,彩色错位只能从字形边缘露出,即 classic RGB 色差边(chromatic aberration)观感。
- 04
动画只改 transform / clip-path / opacity(合成器友好的属性),双影各一份文本节点,小面积标题开销可忽略;不要把 clip-path 动画用到大段正文上。
- 05
无障碍:reduced-motion 下双影隐藏,静态显示干净文字;爆发窗口的比例与 --offset_px 可按页面气质调低,做成『偶发失真』比『持续抖动』更高级。
源代码
SOURCE
加载源代码…