怎样在CSS3中实现打字机动态文字输出特效-css教程-PHP中文网

在css3中实现打字机动态文字输出特效，核心是利用 white-space: nowrap 配合 overflow: hidden 限制容器宽度，并通过 @keyframes 动画改变 width 属性来模拟字符逐个显现的效果。具体做法是设置一个包含完整文本的元素，定义关键帧使其宽度从0扩展到内容实际宽度，同时利用 steps() 计时函数让宽度变化呈现阶梯状停顿，从而产生逐字跳动的视觉感。

怎样在CSS3中实现打字机动态文字输出特效

如何控制打字机的输入速度与光标闪烁频率

要调整打字速度，只需修改 @keyframes 动画的总时长（duration），例如将 4s 改为 8s 即可减半速度。光标闪烁则通过另一个独立的 @keyframes 动画控制 border-right 或伪元素的透明度来实现，两者互不干扰。关键在于使用 steps(N) 其中N为字符数，确保每一“步”对应一个字符的出现间隔。

怎样在CSS3中实现打字机动态文字输出特效

.typewriter {
  white-space: nowrap;
  overflow: hidden;
  border-right: .15em solid orange; /* 光标 */
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

如何实现打字结束后保留完整文本并停止光标

当打字动画完成后，若希望文本保持显示且光标消失，需将 animation-fill-mode 设置为 forwards，并确保最终状态的 width 为 100% 或 max-content。对于光标，可以通过给动画添加 infinite 以外的独立类，或在动画结束时通过 animation-delay 错开时间，使光标动画在打字完成前停止。更稳健的做法是使用两个嵌套元素，外层处理打字，内层处理光标，分别赋予不同的动画持续时间。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

怎样在CSS3中实现打字机动态文字输出特效

.container {
  position: relative;
  display: inline-block;
}
.text {
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid black;
  animation: typing 3s steps(30, end), hide-cursor 0.1s step-end 3s forwards;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes hide-cursor {
  to { border-right-color: transparent }
}

基于steps参数与字符数量的匹配问题

在使用 steps(N) 时，如果N值小于实际字符数，最后几个字符会瞬间出现而非逐个显示；如果N值远大于字符数，则会出现空白停顿。因此，必须确保 steps() 中的数值至少等于文本长度。对于动态内容，建议通过JavaScript计算字符数并注入CSS变量，或在静态HTML中手动计数。若文本包含空格或特殊符号，它们同样占据一步，需计入总数。

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