html怎么做文字打字机效果_html typewriter打字机逐字显示动画【基础】-html教程-PHP中文网

最简打字机效果用 css @keyframes 控制 width 与 overflow: hidden 实现，需设固定宽度（如 20ch）、white-space: nowrap 和 steps() 函数，配合光标动画；js 方案用 settimeout 逐字拼接再写入，避免频繁 dom 操作。

html怎么做文字打字机效果_html typewriter打字机逐字显示动画【基础】

用 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></strong>），需用 DOMParser 或白名单过滤，不能裸插

function typeText(el, text, delay = 100) {
  let i = 0;
  el.textContent = ''; // 先清空
  function step() {
    if (i 

<h3>为什么 <code>requestAnimationFrame</code> 不适合基础打字机</h3>
<p>有人想用 <code>requestAnimationFrame</code> 替代 <code>setTimeout</code>，结果发现字符飞快刷完——因为 rAF 每秒触发 60 次，它不等时间，只等帧。你没法靠它“卡住节奏”。</p>
<p>除非你手动计时（比如记录上一次执行时间，差值不够就不写字符），否则它和打字机需求天然冲突。</p>

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 或伪元素更稳

打字机效果看着简单，但字符边界、换行、光标状态、中断响应这几个点一旦没控住，用户第一感觉就是“卡”或者“假”。别省那几行判断逻辑。