AUTO · 自动演示
参数调改
PLAYGROUND
波动周期--dur_ms
8005000
波幅--amp_px
226
逐字相位差--phase_ms
20260
文字字号--font_px
2872
基底文字色--text_color
波峰颜色--peak_color
实现要点
NOTES- 01
每个字符 span 播放同一条上下位移 keyframes,用内联 --i 乘以 --phase_ms 做 animation-delay 错峰——延迟为负值(--i * phase_ms 的负数),页面加载瞬间就处于稳定波形中段,而不是从整齐静止开始。
- 02
位移曲线用 ease-in-out 配合 0%/50%/100% 三帧,近似正弦;想要更硬的『跳浪』感可以把缓动换成 cubic-bezier(0.45, 0, 0.55, 1) 或叠加轻微 rotate。
- 03
总相位差(字符数 × phase_ms)决定可见波峰个数:大约等于周期的一半时是单峰行进波,明显小于周期时会出现多个峰——调 phase_ms 比调周期更能改变观感。
- 04
行高要给足(line-height ≥ 1.9)并让容器只包住文字本体,上下各留出 amp_px 空间,任意帧都不裁切;位移只动 transform(合成器路径),字符量少时可常驻播放。
- 05
波峰染色只是锦上添花:keyframes 里 50% 帧换 peak_color,让最高点微微发亮;不想要颜色变化就把 peak_color 设成与 text_color 相同。
- 06
无障碍:h1 放完整 aria-label、内部 span 标记 aria-hidden;reduced-motion 下取消位移,静态显示完整文本。
源代码
SOURCE
加载源代码…