波浪文字（逐字起伏振幅可控 CSS 源码）

效果演示（真实可交互）

下方「粤喵波浪文字 WAVE」的每个字都在做上下起伏，相邻字符依次错开半拍，形成海浪推进的视觉效果。拖动「振幅」滑块可以把波浪从 4px 微澜调到 36px 巨浪；拖动「速度」滑块可以控制起伏快慢；在文本输入框里输入任意内容并点击「生成」，文字会即时重新拆分、按新内容起浪。

完整代码

HTML 结构：JS 把一句话拆成单个字符的 <span>，并给每个字符写入错峰延迟：

<h2 class="wv-line" id="wvLine"></h2>

核心 CSS：每个字符是一个行内块，套用同一个上下位移关键帧，--wv-d 是错峰延迟，--wv-amp 是振幅：

.wv-line span {
  display: inline-block;
  animation: wvWave var(--wv-dur, 1.8s) ease-in-out infinite;
  animation-delay: var(--wv-d, 0s);
}
@keyframes wvWave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--wv-amp, 14px) * -1)); }
}

原生 JS：拆分字符并写入延迟，滑块实时修改 CSS 变量：

function split(text) {
  line.textContent = '';
  [...text].forEach((ch, i) => {
    const s = document.createElement('span');
    s.textContent = ch === ' ' ? '\u00A0' : ch;
    s.style.setProperty('--wv-d', i * 0.06 + 's');
    line.appendChild(s);
  });
}
amp.addEventListener('input', () => {
  stage.style.setProperty('--wv-amp', amp.value + 'px');
});

参数说明

兼容性与性能

• 关键帧里使用 calc(var(--amp) * -1)，现代浏览器均可解析；老浏览器会退回无位移的静态文字
• 动画只作用于 transform，属于合成属性，几十个字符同时起伏也没有卡顿
• 空格会被替换为 \u00A0 不换行空格，保证英文单词不被拆断换行
• 中文、英文、数字混排均可，emoji 也能参与起伏

常见问题

Q: 波浪看起来是「抖动」而不是「推进」？ 错峰延迟 --wv-d 太小或周期太长都会让相邻字趋同。把延迟系数从 0.06s 提到 0.1s，并让周期保持在 2s 以内。

Q: 想只让部分字起伏？ 拆分逻辑里给不需要起伏的字符跳过 animation 即可，或对整词用 <span class="wv-static"> 包裹。

Q: 页面加载时希望先静止后起浪？ 给关键帧加上 0% 保持静止段（如 0%, 30% 位移为 0），再配合动画延迟即可。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。