CSS如何实现打字机效果_利用animation与宽度变化

用 ch 单位 + step-end 实现打字机效果最可靠，因 width 动画无法逐字裁切且受混排、字体度量影响；需 overflow: hidden、width: nch、steps(n, end) 或 step-end，并同步控制光标动画。animation + width 实现打字机效果为什么通常失败直接用 width 动画模拟打字，几乎必然出问题：文字是流式布局，width 变化不会"逐字裁切"，而是拉伸或压缩整个容器；更关键的是，中英文混排、换行、字体度量差异会让 width 值极难精确控制。这不是参数调得不够细，而是思路错了。真正可靠的打字机效果必须用 ch 单位 + step-end核心是让动画帧严格对齐字符数，不依赖像素宽度。用 ch（一个"0"的显示宽度）作为 width 单位，配合 steps() 时间函数，才能实现"每帧只显示一个字符"的机械感。实操要点：overflow: hidden 必须加在容器上，否则超出部分会溢出动画的 to 值写成 width: <var>n</var>ch，其中 n 是文本总字符数（含空格），可用 JS 动态算：el.textContent.length必须用 animation-timing-function: step-end，写成 steps(<var>n</var>, end) 也行，但 step-end 更简洁且兼容性更好避免用 em 或 rem，它们受字体大小继承影响，ch 才与当前字体实际字符宽度绑定示例 CSS：立即学习"前端免费学习笔记（深入）"；code{.typewriter { overflow: hidden; border-right: 1px solid; white-space: nowrap; animation: typing 3s steps(12, end), blink-caret .75s step-end infinite;}}@keyframes typing { from { width: 0 } to { width: 12ch }}@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: currentColor }}中文、Emoji 和等宽字体不是必须的，但会影响 ch 精度ch 在非等宽字体下，对中文和 Emoji 的宽度估算可能偏差------比如某些中文字宽度接近 2ch，而 Emoji 可能撑满整行。这不是 bug，是字体度量本身的限制。 Seed-Music 字节跳动推出的AI音乐生成与编辑工具