如何利用CSS实现打字机动态效果_通过::after与keyframes动画-css教程-PHP中文网

直接用 content + ::after 无法实现流畅打字效果，因 content 不支持逐字符动画且不可过渡；应改用 width 或 clip-path 配合 steps() 控制遮罩，文字写在 html 内，光标单独用伪元素实现。

如何利用css实现打字机动态效果_通过::after与keyframes动画

为什么直接用 `content` + `::after` 写打字效果会卡顿或跳字

因为 content 属性本身不支持逐字符动画，CSS 无法对伪元素的内容做“字符串切片”；你看到的所谓“打字”效果，本质是靠 keyframes 控制 width 或 clip-path 做视觉遮罩，不是真正在往里塞字符。如果误以为可以动态改 content 的值来模拟输入，就会发现它根本不响应动画帧——content 是非过渡属性，也不能被 @keyframes 驱动。

实操建议：

用 white-space: nowrap 和 overflow: hidden 锁定单行显示
动画目标必须是可过渡的属性：优先选 width（配合 inline-block）或 clip-path（更平滑，但 IE 不支持）
文字内容写在 HTML 元素内，不要试图塞进 ::after 的 content 里做动态拼接
若坚持用 ::after，只让它承载光标（如 content: "|"），而非文字主体

用 `width` + `steps()` 实现精准逐字节奏

steps(6, end) 这类缓动函数才是控制“一个字一停”的关键，不是靠时间均分。假设你要打 6 个字，就设 steps(6, end)，动画总时长除以 6 才是单字停留时间。用 linear 会滑动模糊，看不出字形。

示例结构：

<div class="typewriter">Hello World</div>

CSS 片段：

.typewriter {
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #000;
  width: 0;
  animation: 
    typing 3.2s steps(11, end), 
    blink-caret .75s step-end infinite;
}
@keyframes typing {
  from { width: 0 }
  to { width: 11em } /* 手动估算字符宽度，或用 ch 单位 */
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #000 }
}

注意点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

11em 是粗略值，实际应按字体和字号测——更稳妥用 ch：比如 width: 11ch（1ch ≈ 一个 0 的宽度）
steps(11, end) 中的 11 必须严格等于字符数（空格也算），否则最后一字闪一下就消失
动画结束后加 animation-fill-mode: forwards，否则 width 会弹回 0

`clip-path` 方案比 `width` 更可靠，但要注意兼容性

clip-path: inset(0 100% 0 0) 从右往左裁剪，配合 animation 改变右侧偏移量，能避免字体度量误差，也不依赖 em/ch 估算。但 Safari 旧版、IE 完全不支持，移动端 Android 4.4– 最好降级。

核心写法：

@keyframes clip-typing {
  from { clip-path: inset(0 100% 0 0) }
  to { clip-path: inset(0 0 0 0) }
}
.typewriter-clip {
  clip-path: inset(0 100% 0 0);
  animation: clip-typing 3.2s steps(11, end) forwards;
}

使用条件：