纯CSS打字机效果需用等宽字体、overflow:hidden、white-space:nowrap，width从0到Nch动画配合steps()，光标用border-right或伪元素opacity实现；JS方案则通过递归setTimeout逐字插入textContent，注意DOM加载时机和XSS防护。
用 CSS @keyframes 实现基础打字机效果
纯 CSS 方案最轻量，适合静态文本或内容不常变的场景。核心是控制 width 从 0 到目标宽度，并配合 overflow: hidden 和等宽字体模拟逐字出现。
关键点：必须用等宽字体（如 monospace），否则光标位置会漂移；white-space: nowrap 防止换行打断动画；动画时长需按字符数动态计算，否则太快/太慢都失真。
- 给元素设
font-family: monospace、overflow: hidden、white-space: nowrap - 用
ch单位定义width动画终点（1ch≈ 1 个等宽字符宽度） - 动画时长建议按字符数 × 0.05s～0.08s 计算，例如 20 字设
1.2s - 加
border-right模拟光标，用steps()或ease-in-out让闪烁更自然
@keyframes typewriter {
from { width: 0; }
to { width: 20ch; } /* 假设文本共 20 字 */
}
.typewriter {
font-family: monospace;
overflow: hidden;
white-space: nowrap;
border-right: 1px solid;
animation: typewriter 1.2s steps(20, end), blink 0.75s step-end infinite;
}用 JavaScript setTimeout 精确控制逐字输出
需要动态内容、暂停/重播/中断交互，或文本含 HTML 标签时，CSS 方案就力不从心了。JS 方案能真正“一个字一个字地塞进去”，兼容性好，逻辑清晰。
注意：直接操作 innerHTML 有 XSS 风险；若文本来自用户输入，必须先做 textContent 赋值或转义；频繁 DOM 操作影响性能，长文本建议用 document.createTextNode 批量插入。
立即学习“前端免费学习笔记（深入）”；
- 把目标文本拆成数组：
text.split('') - 用递归
setTimeout或setInterval控制节奏，每次追加一个字符 - 用
element.textContent = currentText替代innerHTML，避免标签被解析 - 返回一个对象，包含
pause()、resume()、stop()方法便于控制
function typewriter(element, text, delay = 80) {
let i = 0;
const timer = setInterval(() => {
if (i < text.length) {
element.textContent += text[i++];
} else {
clearInterval(timer);
}
}, delay);
return { stop: () => clearInterval(timer) };
}
// 使用：const tw = typewriter(document.getElementById('msg'), 'Hello world');遇到 Uncaught TypeError: Cannot set property 'textContent' of null 怎么办
这是 JS 打字机最常见的报错，根本原因不是代码写错，而是 DOM 元素还没加载完成，脚本就执行了。
- 确保脚本在
</body>之前引入，或用DOMContentLoaded包裹 - 不要依赖
window.onload，它等所有资源（图片、CSS）加载完才触发，太晚 - 检查选择器是否写错：比如
getElementById('msg')但 HTML 里是id="message" - 服务端渲染或框架（如 Vue/React）中，需确认元素挂载完成后再调用打字函数
光标闪烁不同步、文字卡顿、移动端失效？
这些问题通常不是动画本身的问题，而是浏览器渲染机制或设备性能导致的视觉偏差。
CSS 动画在低性能设备上容易掉帧，steps() 函数若参数不对会导致光标跳变；iOS Safari 对 border-right 闪烁支持不稳定，建议改用伪元素 + opacity 动画；长文本逐字 JS 渲染可能阻塞主线程，造成卡顿。
- 光标用
::after伪元素实现，动画用opacity替代border更可靠 - JS 方案中，超过 100 字建议用
requestIdleCallback分片处理，避免阻塞渲染 - 禁用过渡动画的元素加
will-change: opacity提升合成层性能 - 测试务必在真机上进行，尤其是 iOS，模拟器行为和真实体验差异很大
实际项目里，多数人卡在光标同步和移动端兼容上——这两个问题不靠调试器看不出来，得打开真机录屏一帧一帧比对。
