怎样使用CSS3实现文字逐字打印打字机光标闪烁动画？-css教程-PHP中文网

核心是用width或ch单位配合overflow:hidden裁剪实现逐字推进效果，需设white-space:nowrap、position:relative，光标用::after绝对定位锚定右端并单独动画，避免与width联动导致漂移。

怎样使用css3实现文字逐字打印打字机光标闪烁动画？

核心是控制 width 或 ch 单位裁剪，配合 overflow: hidden 实现“逐字出现”错觉。不能直接靠 letter-spacing 或 opacity 动画——那只是淡入，不是打字机的“从左到右推进”感。

推荐用 ch 单位（1 ch ≈ 当前字体中 “0” 的宽度），它比固定像素更适配等宽/非等宽字体：

@keyframes type {
  from { width: 0ch; }
  to { width: 100%; }
}

注意：必须给元素设 white-space: nowrap 和 overflow: hidden，否则文字会换行或撑开容器。

如果文字含中文或混合字体，ch 可能不准，可改用 max-width + inline-block 配合 font-family: monospace 提升一致性
动画时长建议按字符数动态计算，比如 200ms * 字符数，避免短文本飞快、长文本拖沓
别用 steps() 函数模拟“逐字跳变”——它在 Safari 中对中文支持差，且光标会卡顿

光标本质是一个伪元素 ::after，关键在于把它“锚定”在内容末尾，而不是随 width 动画一起缩放。错误做法是把光标写在同一个 @keyframes 里，会导致光标位置漂移或缩放。

正确做法：分离动画，用绝对定位 + right: 0 把光标钉在容器右边界，并单独控制其 opacity：

.typewriter::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: blink 1s infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

必须加 position: relative 到父容器，否则 right: 0 会相对于视口定位。

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

下载

光标高度建议用 line-height 调整，例如 height: 0.8em，避免和字体 ascender/descender 冲突
若文字有 text-shadow 或背景渐变，光标也要同步加，否则视觉脱节
移动端 Safari 对 ::after 在 overflow: hidden 容器里的渲染有延迟，可加 transform: translateZ(0) 强制硬件加速

ch 单位在 IE 完全不支持，Edge 16+ 才开始支持；而 steps() 在 iOS 15.4 之前对中文字符计数异常。所以生产环境不要只押一个方案。

稳妥做法是降级为 JavaScript 控制：用 setTimeout 逐个追加字符，CSS 只负责光标动画。但纯 CSS 方案仍值得用——只要避开两个雷区：

别在 width 动画中混用 % 和 ch，Safari 会插值错误，导致光标提前消失
避免对整个段落（p）直接设 animation，应包裹一层 span 并设 display: inline-block，否则 Flex/Grid 容器中动画会失效
动画触发后，若 DOM 被 Vue/React 重绘，CSS 动画可能中断，需加 animation-fill-mode: forwards 锁定最终态

默认 animation-iteration-count: 1 是够的，但用户可能想点击按钮重播。纯 CSS 无法响应点击事件，必须结合 JS 控制类名切换。

推荐模式：用 typing 类触发动画，JS 控制增删该类：

.text { animation: none; }
.text.typing {
  animation: type 2s steps(20, end), blink 1s infinite;
}

这样既保留 CSS 性能优势，又具备交互能力。注意 steps(20, end) 中的 20 应等于字符数，否则会出现“多打一格”或“少一格”的错位。

实际最难的不是写出动画，而是让光标在各种字体、字号、DPR、系统语言设置下都稳稳钉在最后一个字右边——这需要反复在真机上测 iOS Chrome、Android Firefox 和 macOS Safari。

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

怎样使用CSS3实现文字逐字打印打字机光标闪烁动画？