用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 步。
