波浪文字

文字一个接一个地跳起，让一道柔和的波浪不断穿过整句话。

CSS
文字
循环
收录于 2026-10-30

AI 提示词

用 CSS 在 React 中制作波浪文字动画。用 Array.from 把文字“你好，世界”拆成每个字一个 inline-block 的 <span>，并给每个 span 设置等于其序号的 --i 自定义属性。所有 span 使用同一个 keyframe：0% 时 translateY 为 0，30% 时为 -0.3em，60% 时回到 0 并保持到 100%，时长 1.6 秒，缓动为 cubic-bezier(0.65, 0, 0.35, 1)，无限循环。用 animation-delay: calc(var(--i) * 70ms) 让每个字依次错开。把原始文字放在外层元素的 aria-label 中，并给每个 span 加上 aria-hidden。在 prefers-reduced-motion 下关闭动画。

源代码

Demo.tsx

'use client'

import s from './demo.module.css'

export default function WaveLetters({ labels }: { labels: Record<string, string> }) {
  return (
    <p className={s.text} aria-label={labels.text}>
      {Array.from(labels.text).map((ch, i) => (
        <span key={i} className={s.ch} style={{ '--i': i } as React.CSSProperties} aria-hidden="true">
          {ch === ' ' ? ' ' : ch}
        </span>
      ))}
    </p>
  )
}

demo.module.css

.text {
  display: flex;
  margin: 0;
  font: 700 2.4rem / 1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--stage-ink);
  white-space: nowrap;
}

.ch {
  display: inline-block;
  animation: wave 1.6s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i) * 70ms);
}

.ch:nth-child(3n) { color: var(--stage-accent); }

@keyframes wave {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-0.3em); }
}

@media (prefers-reduced-motion: reduce) {
  .ch { animation: none; }
}