H5 中怎么用 CSS 关键帧实现文字逐字打印（Typewriter）的打字机特效-H5教程-PHP中文网

H5文字逐字打印效果通过@keyframes控制容器width从0ch增至文本字符数对应ch值，配合monospace字体、overflow:hidden和white-space:nowrap实现；需用steps(字符数,end)分步动画并动态注入字符数以适配不同文本长度。

h5 中怎么用 css 关键帧实现文字逐字打印（typewriter）的打字机特效

在 H5 页面中实现文字逐字打印（Typewriter）效果，核心是利用 @keyframes 定义字符逐个“出现”的动画，并配合 monospace 字体、overflow: hidden 和 white-space: nowrap 控制显示区域。关键不在于“逐帧控制每个字”，而是通过控制容器宽度从 0 增长，配合字体等宽特性，营造出“打字”错觉。

基础结构：等宽字体 + 隐藏溢出

确保文字有可预测的宽度表现，必须使用等宽字体（如 Consolas、monospace），并设置容器不换行、隐藏超出部分：

<div class="typewriter">Hello, world!</div>

对应 CSS：

.typewriter {
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  overflow: hidden;           /* 关键：隐藏未“打出”的部分 */
  white-space: nowrap;        /* 关键：强制单行，不换行 */
  border-right: 2px solid #000; /* 可选：模拟光标 */
}

关键帧动画：宽度从 0 到完整内容宽

动画本质是让容器的 width 从 0ch（0 个字符宽度）逐渐增长到文本总字符数对应的 ch 单位宽度。使用 ch 单位能精准匹配等宽字体下每个字符的宽度：

@keyframes typing {
  from { width: 0ch; }
  to   { width: 13ch; } /* "Hello, world!" 共 13 个字符（含空格和标点） */
}

然后应用动画：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

.typewriter {
  animation: typing 3s steps(13, end), blink-caret 0.75s step-end infinite;
}

steps(13, end) 表示将动画分为 13 步，每步显示一个字符，且在每步结束时跳变（避免平滑过渡）
3s 是总时长，可根据字符数调整为 0.3s × 字符数 实现匀速效果

添加闪烁光标（可选但推荐）

用另一个关键帧动画控制右边界光标的显隐，增强真实感：

@keyframes blink-caret {
  from, to { border-right-color: transparent; }
  50%      { border-right-color: #000; }
}

注意：要与 typing 动画同时启用，且用 step-end 保持光标只在字符停稳后闪烁。

适配动态内容或不同长度文本

硬编码 13ch 和 steps(13) 不灵活。实际项目中建议：

用 JavaScript 获取文本长度：el.textContent.length，动态设置 width 和 steps()
或改用 width: 100% + max-width 配合 animation-timing-function: steps(N)，再用 JS 注入内联样式
更简洁方案：用 ch 单位 + CSS 自定义属性，例如 --char-count: 13;，在 keyframes 中写 to { width: calc(var(--char-count) * 1ch); }

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！