纯CSS打字机效果依赖steps()预设字符数，无法适配动态文本或响应式布局；JS逐字插入更可靠，兼容中英文混排、i18n及交互控制。
纯 CSS 实现打字机效果，只适用于静态文本、固定宽度、且内容不需动态更新的场景；一旦文本长度变化或容器响应式缩放，steps() 就会错位、光标偏移、动画卡顿——这不是 bug，是 steps() 依赖预设字符数的硬限制决定的。
为什么 steps(n) 必须写死字符数？
steps(n) 不是“每 n 毫秒走一步”，而是把整个动画时间等分为 n 步，每步瞬间跳到下一个状态。CSS 动画本身无法感知字符串长度，所以你必须手动数出目标文本的字符总数（含空格、中文、标点），再填进 steps(12) 这样的值里。
- 英文和数字：一个字符算 1 步
- 中文、日文、emoji：通常也按 1 字符 = 1 步，但某些字体下全角字符可能影响
width计算精度 - 如果文本后期被 JS 修改（比如 i18n 切换语言），
steps()值不会自动更新，动画立刻失步 - 响应式布局中，
width: 100%在不同屏幕下像素值不同，但steps()步数不变 → 字符“挤”或“漏”
textContent += char 是最可控的逐字插入方式
用 JavaScript 控制每个字符的插入时机，绕过了 CSS 宽度计算和字体渲染差异问题，天然兼容中英文混排、动态加载、暂停/重播等交互需求。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 不要用
innerHTML += char，避免 HTML 转义风险（如<被解析为标签） - 用
textContent或innerText更安全，前者保留空白符，后者会折叠 - 延迟不宜低于 50ms：太快人眼无法分辨，还可能触发浏览器节流（尤其低端设备）
- 想模拟真实打字节奏？可对每个字符随机加 ±20ms 偏差，或对标点符号额外 delay +100ms
光标闪烁别用 ::after + opacity 动画
在 Safari 和部分旧版 Chrome 中，::after 的 opacity 动画与文本渲染不同步，容易出现光标“拖影”或闪烁频率不稳。更可靠的做法是用 border-right + steps(1)：
立即学习“前端免费学习笔记（深入）”；
#typewriter {
border-right: 0.05em solid currentColor;
animation: blink 1s steps(1) infinite;
}
@keyframes blink {
50% { border-color: transparent; }
}
- 必须配合
white-space: nowrap和overflow: hidden，否则光标位置会随换行漂移 - 打字结束时，别靠 JS 移除伪元素——直接
el.style.borderRight = 'none'更快更确定 - 如果容器用了 flex 或 grid 布局，确保父级没设置
align-items: center类似属性，否则光标垂直对不齐基线
真正难的不是让字一个个出来，而是让“停顿”“删除”“多行切换”这些行为在各种字体、DPI、系统设置下都保持节奏一致——这时候 JS 状态机比 CSS 动画靠谱得多，而最容易被忽略的，恰恰是中文字体在 Windows 上默认用微软雅黑、Mac 上用 PingFang、Linux 上用 Noto Sans，它们的字符宽度和行高都不一样。
