最简打字机效果用 CSS @keyframes 控制 width 与 overflow: hidden 实现，需设固定宽度（如 20ch）、white-space: nowrap 和 steps() 函数，配合光标动画；JS 方案用 setTimeout 逐字拼接再写入，避免频繁 DOM 操作。
用 CSS @keyframes 实现最简打字机效果
纯 CSS 方案最轻量，适合静态文本、标题或 Banner 文案。核心是控制 width 配合 overflow: hidden，再用 animation 逐帧展开。
常见错误：直接对 opacity 或 visibility 做动画——这不会产生“逐字”感，只是整体淡入。
- 必须给容器设固定宽度（如
width: 20ch）或max-width，否则width: 0 → 100%会撑满父容器，失去“打字长度”控制 - 用
ch单位比px更可靠，1ch≈ 当前字体下一个字符的平均宽度 - 动画时长要按字符数算：20 个字建议总时长
2s～3s，太快像闪，太慢像卡
@keyframes typewriter {
from { width: 0; }
to { width: 20ch; }
}
.typewriter {
overflow: hidden;
border-right: 1px solid #000;
white-space: nowrap;
animation: typewriter 2.5s steps(20, end), blink-caret 0.75s step-end infinite;
}
JavaScript setTimeout 控制逐字输出（兼容老浏览器）
需要动态内容、换行、或响应用户操作时，JS 是唯一选择。setTimeout 比 setInterval 更稳——避免因渲染延迟导致字符堆积或跳字。
容易踩的坑：innerHTML += char 在循环里反复写 DOM，性能差；用字符串拼接再一次性写入更安全。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 每步延时建议 80ms～120ms，人眼能感知“打字节奏”，又不显拖沓
- 遇到
\n要转成<br>，否则换行失效；但别直接.replace(/\n/g, '<br>')，会 XSS，先用textContent清洗原始文本 - 如果文本含 HTML 标签（如
<strong>），需用DOMParser或白名单过滤，不能裸插
function typeText(el, text, delay = 100) {
let i = 0;
el.textContent = ''; // 先清空
function step() {
if (i < text.length) {
el.textContent += text[i];
i++;
setTimeout(step, delay);
}
}
step();
}
为什么 requestAnimationFrame 不适合基础打字机
有人想用 requestAnimationFrame 替代 setTimeout，结果发现字符飞快刷完——因为 rAF 每秒触发 60 次，它不等时间，只等帧。你没法靠它“卡住节奏”。
除非你手动计时（比如记录上一次执行时间，差值不够就不写字符），否则它和打字机需求天然冲突。
- rAF 适合做 canvas 动画、滚动追踪这类“尽可能跟屏幕刷新同步”的事
- 打字机本质是「时间驱动」而非「帧驱动」，硬套 rAF 反而增加逻辑复杂度
- 移动端低端机上，rAF + 计时器嵌套还可能因 JS 主线程阻塞导致掉帧、卡顿
光标闪烁要单独处理，别指望 border-right 动画一劳永逸
CSS 动画里的 blink-caret 看似方便，但实际问题多：动画结束时光标消失、focus 失去后仍闪烁、与输入框光标行为不一致。
真正稳妥的做法是 JS 控制一个类名切换，配合 transition 或 @keyframes 做 visibility 交替。
- 在 JS 打字函数结尾加
el.classList.add('typing-complete')，CSS 里写.typing-complete::after { animation: none; } - 如果要支持暂停/继续，光标状态必须和当前打字进度绑定，不能只靠 CSS 动画自运行
- 移动端 Safari 对
border-right闪烁有渲染 bug，改用box-shadow或伪元素更稳
