用 steps() 实现打字机效果需字符数精准匹配，steps(n, end) 将动画分为 n 离散帧，每帧显前 n 字；width 线性动画滑入无停顿，clip-path 更稳且适配非等宽字体；光标须独立动画并用 step-end 防闪烁。
直接用 steps() 配合 width 或 clip-path 就能实现，不需要 JS；但字符数必须手动或动态对齐，否则会漏字、卡顿或提前结束。
为什么不能只靠 width: 0 → 100% 线性动画？
线性动画会让文字“滑入”，不是逐字停顿的打字机感。关键在 steps(N, end) —— 它把整个动画切成 N 个离散帧，每帧只显示前 n 个字符，不插值、不过渡。
-
steps(12, end)表示动画共 12 步，第 12 步才完成（即最后一步才显示全部） - 若文本实际是 13 个字符，但写成
steps(12, end)，最后一个字永远出不来 - 中英文混排时，每个汉字、字母、标点、空格都算 1 步，不能按像素或 ch 单位估算
clip-path 比 width 更靠谱的场景
当字体非等宽（比如中文+英文混用）、或容器宽度受弹性布局影响时，width 动画容易错位或换行；clip-path: inset(0 X% 0 0) 直接裁右侧，不依赖字符宽度计算。
- 初始状态：
clip-path: inset(0 100% 0 0)（全遮） - 结束状态：
clip-path: inset(0 0 0 0)（全显） - 必须配
white-space: nowrap，否则换行会打断裁剪逻辑 - 现代浏览器（Chrome/Firefox/Safari 15.4+）均支持，IE 不支持
光标闪烁别和文字动画绑在一起
用 border-right 或 ::after 做光标时，动画必须独立，否则会随 width 缩放或漂移。
- 推荐用
border-right：简洁、兼容好，直接加在文本元素上 - 动画写法必须是
blink-caret .75s step-end infinite，step-end防止光标半明半暗 - 如果用了
::after，父容器得加position: relative，光标用right: 0锚定末尾 - 光标颜色建议用
currentColor，避免和文字色脱节
字符数不对会导致效果完全失效
这是最常被忽略的一环：CSS 里写的 steps(N, end) 的 N 必须等于 DOM 中真实字符数（textContent.length），包括空格和换行符。
- 硬编码风险高：改了文案就得同步改 CSS 里的数字
- 可用 JS 注入 CSS 变量：
element.style.setProperty('--char-count', text.length)，然后 CSS 里写steps(var(--char-count), end) - 动画时长建议动态算，比如
calc(120ms * var(--char-count))，避免短文本一闪而过
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
