当前位置：首页 > 文章列表 > 文章 > 前端 > CSS变量实现打字机效果技巧

CSS变量实现打字机效果技巧

2026-05-28 12:33:49 0浏览收藏

为什么直接用 `animation` + `width` 模拟打字机不靠谱

因为中英文混排时，width 无法对应字符数；字体变化、缩放或响应式场景下，像素值会失准。真正可控的是字符数量本身——而 ch 单位恰好定义为“当前字体中 '0' 字符的宽度”，天然适配等宽/非等宽字体下的单字符占位。配合 CSS 计数器（counter-increment）和 counter() 函数，才能让动画进度与真实字符数严格对齐。

关键点：CSS 计数器不能直接驱动动画，必须借助 counter() 在 content 中渲染，再用 ch 控制容器宽度裁剪显示范围。

常见错误现象：width: calc(var(--i) * 1ch) 中 --i 是变量而非计数器，无法自动递增；或者误以为 counter() 能在 @keyframes 里参与计算——它不能。

如何用 `counter()` + `ch` 实现逐字显现

核心思路：把文字内容写进伪元素的 content，用计数器控制显示长度，再用父容器 overflow: hidden 和动态 width 截断。

给容器设 counter-reset: char 0
用 @keyframes 逐步增加计数器值：counter-increment: char 1（注意：动画里只能写整数增量，不能写变量）
伪元素 ::after 的 content: counter(char) 只能输出数字，所以得把原文本拆成单字符并分别套计数器——这不可行

绕过限制的实操方案：放弃用计数器“生成”文本，改用计数器“索引”预设文本。即——把完整文本写死在 content 中，再用 ch 宽度 + clip-path 或 mask 做视觉裁剪。此时计数器只用于控制动画帧数，ch 才是宽度依据：

span.typewriter {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
span.typewriter::after {
  content: "Hello, world! ?";
  display: inline-block;
  animation: type 3s steps(13, end), blink 0.5s step-end infinite;
}
@keyframes type {
  0% { width: 0ch; }
  100% { width: 13ch; }
}

这里 13ch 必须手动数清字符数（含空格、emoji），emoji 在多数字体中占 2ch，需实测确认。

`ch` 在不同字体/浏览器下的实际表现差异

ch 看似可靠，但有三个隐藏陷阱：

Chrome 和 Safari 对 emoji 的 ch 宽度处理不一致：同一 emoji 可能被算作 1ch 或 2ch
使用 font-variant-numeric: proportional-nums 时，数字字符宽度不再等宽，ch 仍按 '0' 计算，导致错位
CSS 变量无法直接参与 steps() 的步数计算，例如 steps(calc(var(--len)), end) 无效——steps() 第一个参数必须是字面整数

实操建议：

用 getComputedStyle(el).getPropertyValue('font-family') + 实际测量验证目标字体下 '0' 和目标字符的像素宽度比
对 emoji 或图标，改用 inline-flex + transform: translateX() 逐个移入，避开 ch 依赖
若需动态文本长度，必须用 JS 读取字符串 .length，再注入 style="--len: ${len}"，CSS 仅用于动画执行

用 CSS 变量衔接 JS 动态长度与 `ch` 动画

纯 CSS 无法获取字符串长度，但可以由 JS 注入变量，再由 CSS 使用。这是目前最健壮的混合方案：

CSS 中：

.typewriter {
  --text: "";
  --len: 0;
}
.typewriter::before {
  content: var(--text);
  animation: type calc(var(--len) * 0.2s) steps(var(--len), end) forwards;
}
@keyframes type {
  to { width: calc(var(--len) * 1ch); }
}

注意：steps(var(--len), end) 在 Chrome 115+ 支持，旧版需降级为 JS 控制 animation-timing-function 或改用 JS 动画。

容易被忽略的细节：当 --len 为 0 时，width: 0ch 仍可能因字体 hinting 显示微小空白；建议加 font-size: 0 于容器，再在伪元素中重置字体大小。

今天关于《CSS变量实现打字机效果技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！