← 返回导航

波浪文字效果

animations
波浪文字效果演示
渐变波浪
变色波浪文字
变色波浪
弹跳波浪文字哦
弹跳波浪
摇摆波浪文字呀
摇摆波浪

关键点

  • 波浪文字将每个字符拆分为独立元素，依次上下位移形成波浪起伏效果
  • 每个字符设置递增的 animation-delay，让波浪从左向右传递
  • 使用 transform: translateY() 实现上下移动，配合 ease-in-out 缓动
  • 需要将文本拆分为多个 span 标签，JS 或后端模板可自动完成拆分
  • 波峰高度和动画周期决定波浪的"陡缓"，通常位移 6-12px 较精致

效果说明

每个字符上下波动，延迟错开形成波浪效果的文字动画。将文字拆分成单个 span 元素，每个字符设置不同的 animation-delay，形成连续的波浪感。这里展示 4 种变体：渐变波浪、变色波浪、弹跳波浪、摇摆波浪。