css文字打字机效果怎么做_用steps配合动画实现逐字显示-css教程-PHP中文网

css文字打字机效果怎么做_用steps配合动画实现逐字显示

P粉602998670

发布： 2025-12-19 18:56:02

原创

825人浏览过

用steps()函数配合CSS动画可实现打字机效果，核心是steps(N,end)将动画分为N步逐字显示，推荐clip-path法支持中英文混排，需字符数与steps值严格一致。

css文字打字机效果怎么做_用steps配合动画实现逐字显示

用 steps() 函数配合 CSS 动画，可以轻松实现逼真的打字机效果——文字逐字出现，像在被敲出来一样。

核心原理：用 steps() 控制动画帧数

steps(10, end) 表示把整个动画过程均匀分成 10 步，每步只显示一个“状态”，不平滑过渡。关键在于：把文字长度作为步数，并让 width 或 clip-path 从 0 逐步展开到 100%，每步对应一个字符的宽度。

方法一：用 width + overflow 配合 monospace 字体

适合纯英文或等宽字体场景，简单稳定：

给文字容器设 font-family: monospace，确保每个字符宽度一致
设置 width: 0; overflow: hidden;，初始隐藏全部文字
动画中 width 从 0ch（0 个字符宽）渐变到 Nch（N 为总字符数）
动画时长搭配 steps(N, end)，例如 12 个字就写 steps(12, end)

方法二：用 clip-path 更通用（推荐）

支持中英文混排、任意字体，兼容性好（现代浏览器均支持）：

立即学习“前端免费学习笔记（深入）”；

FaceSwapper

FaceSwapper是一款AI在线换脸工具，可以让用户在照片和视频中无缝交换面孔。

960

查看详情

用 clip-path: inset(0 100% 0 0) 初始遮住全部文字
动画中将右侧偏移从 100% 线性减到 0%，即 inset(0 X% 0 0)
用 steps(N, end) 分 N 步完成，每步露出一个字符
需配合 white-space: nowrap 防止换行打断效果

完整示例代码（clip-path 版）

HTML：

<div class="typewriter">Hello，你好！</div>

登录后复制

CSS：

.typewriter {
  font-family: "Helvetica Neue", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 3s steps(10, end), blink-caret 0.75s step-end infinite;
}
@keyframes typing {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes blink-caret {
  from, to { border-right-color: transparent; }
  50% { border-right-color: currentColor; }
}

登录后复制

注意：steps 数值（这里是 10）要和实际字符数严格一致；中文字符、标点、空格都算 1 步。

以上就是css文字打字机效果怎么做_用steps配合动画实现逐字显示的详细内容，更多请关注php中文网其它相关文章！