MOTION HUB

波浪文字

Wave Text
#wave-text · 71/72
AUTO · 自动演示

参数调改

PLAYGROUND
波动周期--dur_ms
8005000
ms
波幅--amp_px
226
px
逐字相位差--phase_ms
20260
ms
文字字号--font_px
2872
px
基底文字色--text_color
波峰颜色--peak_color

实现要点

NOTES
  1. 01

    每个字符 span 播放同一条上下位移 keyframes,用内联 --i 乘以 --phase_ms 做 animation-delay 错峰——延迟为负值(--i * phase_ms 的负数),页面加载瞬间就处于稳定波形中段,而不是从整齐静止开始。

  2. 02

    位移曲线用 ease-in-out 配合 0%/50%/100% 三帧,近似正弦;想要更硬的『跳浪』感可以把缓动换成 cubic-bezier(0.45, 0, 0.55, 1) 或叠加轻微 rotate。

  3. 03

    总相位差(字符数 × phase_ms)决定可见波峰个数:大约等于周期的一半时是单峰行进波,明显小于周期时会出现多个峰——调 phase_ms 比调周期更能改变观感。

  4. 04

    行高要给足(line-height ≥ 1.9)并让容器只包住文字本体,上下各留出 amp_px 空间,任意帧都不裁切;位移只动 transform(合成器路径),字符量少时可常驻播放。

  5. 05

    波峰染色只是锦上添花:keyframes 里 50% 帧换 peak_color,让最高点微微发亮;不想要颜色变化就把 peak_color 设成与 text_color 相同。

  6. 06

    无障碍:h1 放完整 aria-label、内部 span 标记 aria-hidden;reduced-motion 下取消位移,静态显示完整文本。

源代码

SOURCE

加载源代码…