当前位置：首页 > 文章列表 > 文章 > 前端 > 逐字动画CSS实现教程详解

逐字动画CSS实现教程详解

2026-03-03 11:28:20 0浏览收藏

本文深入解析了一种纯CSS实现文本逐字打字机效果的优雅方案，无需任何JavaScript，仅通过`steps()`时间函数精准控制动画帧数，结合CSS自定义属性、等宽字体与`width`动画，让每个字符像老式打字机般清晰、稳定、逐个浮现；该方法轻量高效、语义清晰、SEO友好且兼容主流浏览器，特别适合静态标题、引导文案等注重性能与可维护性的场景，是现代网页中兼顾视觉表现与技术简洁性的理想实践。

实现逐字显示文本的CSS动画教程

本文介绍如何使用纯HTML与CSS实现文本逐字打字机效果，通过steps()时间函数控制动画帧数，无需JavaScript即可完成流畅的字符逐显效果。

本文介绍如何使用纯HTML与CSS实现文本逐字打字机效果，通过steps()时间函数控制动画帧数，无需JavaScript即可完成流畅的字符逐显效果。

在现代网页开发中，“打字机效果”（Typewriter Effect）常用于首页标题、引导文案或交互式介绍，以增强视觉吸引力与用户注意力。虽然常见方案依赖JavaScript（如setTimeout循环插入字符），但若追求轻量、无脚本、高可维护性，纯CSS方案同样可行——关键在于利用CSS动画的animation-timing-function: steps()特性。

steps(n, end)将动画均匀划分为n个离散阶跃，每步停留固定时长，恰好契合“逐字显现”的需求：每个字符“跳入”视图，而非平滑过渡。但该方法有前提：需预先知道总字符数，并为每个字符单独包裹元素（如），以便统一控制宽度与布局。

以下为完整实现代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>逐字显示动画</title>
  <style>
    p {
      --letters: 47;           /* 总字符数（含空格与标点） */
      --letter-width: 0.6em;   /* 单字符占位宽度（建议等宽字体） */
      --duration: 8s;          /* 整体动画时长 */
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
      white-space: nowrap;
      width: 0;
      overflow: hidden;
      animation: tape var(--duration) steps(var(--letters)) both;
      display: inline-flex;
      margin: 0;
      font-size: 1.2rem;
      line-height: 1.5;
    }

    span {
      width: var(--letter-width);
      flex: none;
      /* 可选：添加轻微延迟营造自然感（非必需） */
      /* animation-delay: calc(var(--index) * 0.1s); —— 需JS动态注入，此处不采用 */
    }

    @keyframes tape {
      to {
        width: calc(var(--letters) * var(--letter-width));
      }
    }
  </style>
</head>
<body>
  <p>
    <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span><span> </span>
    <span>t</span><span>h</span><span>e</span><span>r</span><span>e</span><span>.</span><span> </span>
    <span>M</span><span>y</span><span> </span><span>n</span><span>a</span><span>m</span><span>e</span><span> </span>
    <span>i</span><span>s</span><span> </span><span>X</span><span>Y</span><span>Z</span><span>.</span><span> </span>
    <span>I</span><span> </span><span>a</span><span>m</span><span> </span><span>d</span><span>o</span><span>i</span><span>n</span><span>g</span><span> </span>
    <span>t</span><span>h</span><span>i</span><span>s</span><span>.</span><span>.</span><span>.</span>
  </p>
</body>
</html>

✅ 关键要点说明：