css文字打字机效果怎么做_用steps配合动画实现逐字显示

用steps()函数配合CSS动画可实现打字机效果，核心是steps(N,end)将动画分为N步逐字显示，推荐clip-path法支持中英文混排，需字符数与steps值严格一致。

用 steps() 函数配合 CSS 动画，可以轻松实现逼真的打字机效果——文字逐字出现，像在被敲出来一样。

核心原理：用 steps() 控制动画帧数

steps(10, end) 表示把整个动画过程均匀分成 10 步，每步只显示一个“状态”，不平滑过渡。关键在于：把文字长度作为步数，并让 width 或 clip-path 从 0 逐步展开到 100%，每步对应一个字符的宽度。

方法一：用 width + overflow 配合 monospace 字体

适合纯英文或等宽字体场景，简单稳定：

• 给文字容器设 font-family: monospace，确保每个字符宽度一致
• 设置 width: 0; overflow: hidden;，初始隐藏全部文字
• 动画中 width 从 0ch（0 个字符宽）渐变到 Nch（N 为总字符数）
• 动画时长搭配 steps(N, end)，例如 12 个字就写 steps(12, end)

方法二：用 clip-path 更通用（推荐）

支持中英文混排、任意字体，兼容性好（现代浏览器均支持）：

• 用 clip-path: inset(0 100% 0 0) 初始遮住全部文字
• 动画中将右侧偏移从 100% 线性减到 0%，即 inset(0 X% 0 0)
• 用 steps(N, end) 分 N 步完成，每步露出一个字符
• 需配合 white-space: nowrap 防止换行打断效果

完整示例代码（clip-path 版）

HTML：

Hello，你好！

CSS：

.typewriter {
  font-family: "Helvetica Neue", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 3s steps(10, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes blink-caret {
  from, to { border-right-color: transparent; }
  50% { border-right-color: currentColor; }
}

注意：steps 数值（这里是 10）要和实际字符数严格一致；中文字符、标点、空格都算 1 步。