MOTION HUB

故障文字

Glitch Text
#glitch-text · 16/72
AUTO · 自动演示

参数调改

PLAYGROUND
错位距离--offset_px
110
px
故障周期--dur_ms
16008000
ms
文字字号--font_px
2872
px
双影色 A(冷)--glitch_a
双影色 B(暖)--glitch_b
主体文字色--text_color

实现要点

NOTES
  1. 01

    双影 = ::before/::after 配合 content: attr(data-text) 复用同一份文本,改文案只需同步 HTML 的 data-text 与内容两处;伪元素不进读屏树,h1 上的 aria-label 保证语义完整。

  2. 02

    clip-path: inset(上 右 下 左) 只保留一条横带,配合 steps(1, end) 的时间函数让每段错位瞬间跳变,形成硬切 slices;双影的 keyframes 里大部分时间 opacity: 0,只在两个短窗口爆发,避免全程抖动造成视觉疲劳。

  3. 03

    可读性设计:双影 z-index 为 -1/-2 压在主体文字下方,主体字形任何时刻完整在最上层,彩色错位只能从字形边缘露出,即 classic RGB 色差边(chromatic aberration)观感。

  4. 04

    动画只改 transform / clip-path / opacity(合成器友好的属性),双影各一份文本节点,小面积标题开销可忽略;不要把 clip-path 动画用到大段正文上。

  5. 05

    无障碍:reduced-motion 下双影隐藏,静态显示干净文字;爆发窗口的比例与 --offset_px 可按页面气质调低,做成『偶发失真』比『持续抖动』更高级。

源代码

SOURCE

加载源代码…