CSS Animations

Appearance

波浪文字 ​

Each letter animates up and down with a staggered animation-delay, creating a continuous wave motion across the text.

实时预览 ​

Wave Text!

代码 ​

css
.wave-text {
  display: inline-flex;
  font-size: 36px;
  font-weight: 800;
}

.wave-text span {
  display: inline-block;
  animation: wave 1.5s ease-in-out infinite;
  color: #a78bfa;
}

/* Add animation-delay for each letter */
.wave-text span:nth-child(1)  { animation-delay: 0s; }
.wave-text span:nth-child(2)  { animation-delay: 0.1s; }
.wave-text span:nth-child(3)  { animation-delay: 0.2s; }
.wave-text span:nth-child(4)  { animation-delay: 0.3s; }
.wave-text span:nth-child(5)  { animation-delay: 0.4s; }
.wave-text span:nth-child(6)  { animation-delay: 0.5s; }
.wave-text span:nth-child(7)  { animation-delay: 0.6s; }
.wave-text span:nth-child(8)  { animation-delay: 0.7s; }
.wave-text span:nth-child(9)  { animation-delay: 0.8s; }
.wave-text span:nth-child(10) { animation-delay: 0.9s; }

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
html
<div class="wave-text">
  <span>W</span><span>a</span><span>v</span><span>e</span>
  <span>T</span><span>e</span><span>x</span><span>t</span>
  <span>!</span>
</div>

纯 CSS 实现的波浪文字文字动画效果——通过渐变、阴影、滤镜和变换等 CSS 属性让文字产生视觉动效。所有文字内容保持可选中、可复制、对搜索引擎完全可见。

快速使用 ​

  1. 复制 CSS 代码到你的样式文件中
  2. 在 HTML 中放入对应的文字结构（注意逐字效果需要每个字符包裹 <span>）
  3. 根据你的文字内容调整 animation-delay 和文字数量
  4. 修改颜色和字号以匹配你的品牌风格

使用场景 ​

  • 页面主标题：用渐变文字、霓虹发光或逐字弹跳效果吸引用户注意力
  • 品牌名称/Logo：3D 文字或故障效果传递技术与设计感
  • 营销活动页：彩虹文字、闪烁效果营造促销紧迫感
  • 技术博客/文档：打字机效果展示代码片段或技术标语

常见问题 ​

Q: 文字动画在哪些浏览器下兼容？ A: 大部分效果所有现代浏览器都支持。需注意：background-clip: text 需 -webkit- 前缀；@property 仅 Chrome/Edge 支持。渐变文字和霓虹发光效果建议加降级方案。

Q: 动画文字会影响 SEO 吗？ A: 不会。文字内容仍然在 HTML 中正常渲染，搜索引擎能完整抓取。CSS 动画只影响视觉呈现，不改变 DOM 结构和文本可访问性。

Q: 如何让逐字动画适配任意长度的文字？ A: 用 JavaScript 动态给每个字符包裹 <span> 并设置 animation-delay: calc(var(--i) * 0.05s)，或使用 CSS animation-delay 配合 nth-child 错位。

浏览器兼容性 ​

浏览器兼容性
Chrome / Edge✅ 完全支持（含 @property）
Firefox✅ 基本支持（不含 @property）
Safari✅ 基本支持（需 -webkit-background-clip）
移动端浏览器✅ 完全支持
IE 11❌ 渐变文字等高级效果不支持

使用说明 ​

属性说明
animation-delayStagger each letter — use 0.08s–0.15s increments per character
translateY(-16px)Controls wave height; increase for bigger waves
ease-in-outGives a natural acceleration/deceleration to each bounce
display: inline-flexContainer uses flex to keep letters inline while allowing transforms

Tip: Use JavaScript to dynamically set animation-delay per letter for longer text instead of writing individual rules.

📎 相关动画推荐

以下更多 CSS 文字动画 等你探索——每个都支持在线预览和一键复制代码。

变色文字彩虹文字打字光标效果渐变文字闪烁效果故障文字