CSS怎样实现打字机动画效果？steps()函数详解-css教程-PHP中文网

css怎样实现打字机动画效果？steps()函数详解

CSS实现打字机动画效果，核心在于巧妙利用

steps()

登录后复制

函数来控制文本宽度以离散的步进方式增长，同时结合

overflow: hidden

登录后复制

和

white-space: nowrap

登录后复制

来隐藏超出部分，并模拟光标闪烁。这套组合拳下来，你就能用纯CSS搞定一个相当逼真的打字效果了。

解决方案

要实现一个基础的打字机动画，你需要一个包含文本的元素，比如一个

<span>

登录后复制

或者

<p>

登录后复制

标签。CSS的关键在于控制这个元素的宽度，让它像字符一个一个被敲出来那样逐渐展开。

首先，HTML结构可以很简单：

<div class="typewriter">
  <p>CSS怎样实现打字机动画效果？steps()函数详解</p>
</div>

登录后复制

然后是CSS部分，这才是重头戏：

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

.typewriter p {
  font-family: 'Mono', monospace; /* 选用等宽字体，效果更佳 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  white-space: nowrap; /* 文本不换行 */
  border-right: .15em solid orange; /* 模拟光标 */
  width: 0; /* 初始宽度为0 */
  animation: 
    typing 4s steps(30, end) forwards, /* 打字动画，30是字符数 */
    blink-caret .75s step-end infinite; /* 光标闪烁动画 */
}

/* 打字动画 */
@keyframes typing {
  from { width: 0 }
  to { width: 100% } /* 宽度从0到100% */
}

/* 光标闪烁动画 */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

登录后复制

这里面有几个关键点：

```
overflow: hidden;
```
登录后复制
和
```
white-space: nowrap;
```
登录后复制
是为了确保文本在宽度增长时，不会溢出容器或换行，而是被“裁剪”掉。
```
width: 0;
```
登录后复制
是动画的起点，文本一开始是完全隐藏的。
```
border-right: .15em solid orange;
```
登录后复制
模拟了打字时光标的视觉效果。
```
animation: typing 4s steps(30, end) forwards, blink-caret .75s step-end infinite;
```
登录后复制
是核心。
- ```
typing 4s steps(30, end) forwards
```
  登录后复制
  : 定义了打字动画。
```
4s
```
  登录后复制
  是动画持续时间。
```
steps(30, end)
```
  登录后复制
  是魔法所在，它告诉浏览器将整个动画过程分成30个等长的“步”，每一步结束时更新一次宽度。这里的
```
30
```
  登录后复制
  通常对应文本的字符数量，这样每一步就刚好显示一个字符。
```
end
```
  登录后复制
  表示每一步的结束点发生变化。
```
forwards
```
  登录后复制
  让动画结束后停留在最后一帧，即文本完全显示。
- ```
blink-caret .75s step-end infinite
```
  登录后复制
  : 定义了光标闪烁动画。
```
step-end
```
  登录后复制
  在这里也很关键，它让光标的显示和隐藏是瞬间切换，而不是平滑过渡。

通过这种方式，

width

登录后复制

属性不再是平滑增长，而是跳跃式地一步一步增加，完美模拟了打字机字符逐个出现的离散感。

打字机动画中光标闪烁效果的实现原理是什么？

打字机动画里的那个光标，通常就是一条垂直的细线，一闪一闪的，特别有感觉。它的实现原理其实挺简单，但又很巧妙。我们通常会利用元素的

border-right

登录后复制

属性来模拟这个光标，然后通过一个独立的CSS动画来控制它的颜色透明度，从而达到闪烁的效果。

具体来说，就是给文本容器（或者文本本身，如果它宽度会随内容变化）一个右边框，比如

border-right: .15em solid orange;

登录后复制

。这个边框就成了我们的“光标”。

接着，我们创建一个名为

blink-caret

登录后复制

的

@keyframes

登录后复制

动画：

@keyframes blink-caret {
  from, to { border-color: transparent } /* 动画开始和结束时，边框颜色透明 */
  50% { border-color: orange; } /* 动画进行到一半时，边框颜色变为可见 */
}

登录后复制

然后将这个动画应用到我们的元素上：

animation: blink-caret .75s step-end infinite;

登录后复制

。

这里的

step-end

登录后复制

计时函数是关键，它确保了边框颜色的变化是瞬间完成的，没有渐变过程。

from, to { border-color: transparent }

登录后复制

让光标在动画周期的开始和结束时隐藏（透明），而

50% { border-color: orange; }

登录后复制

则让它在中间显现。

infinite

登录后复制

则保证了光标会一直闪烁下去。

我个人觉得，这个光标闪烁效果，虽然看起来只是个小细节，但它对于增强打字机动画的真实感至关重要。没有它，动画总觉得少了点“活气儿”。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

除了打字机效果，steps()函数在CSS动画中还有哪些巧妙应用？

steps()

登录后复制

函数在CSS动画里远不止打字机效果这么简单，它其实是一个非常强大的计时函数，能把任何平滑的动画分解成一系列离散的步骤。我一直觉得它就像一个“帧控制器”，能让你在纯CSS里实现很多原本需要JavaScript才能搞定的逐帧动画。

一个非常经典的用法就是精灵图（Sprite）动画。如果你有一张包含多个动画帧的图片，比如一个走路的小人，你可以用

steps()

登录后复制

来控制

background-position

登录后复制

，让背景图在预设的步数内精确地跳到下一帧，从而实现逐帧播放的动画效果。

比如，一个有8帧的走路动画精灵图，每帧宽度100px：

.sprite-animation {
  width: 100px;
  height: 100px;
  background-image: url('walk-sprite.png');
  background-position: 0 0; /* 初始位置 */
  animation: walk 1s steps(8) infinite; /* 8帧，每秒一循环 */
}

@keyframes walk {
  to { background-position: -800px 0; } /* 8帧 * 100px = 800px */
}

登录后复制

这样，

background-position

登录后复制

就会在1秒内，分8次跳跃，每次跳跃100px，完美地播放了精灵动画。

另外，

steps()

登录后复制

还可以用于创建自定义的“缓入缓出”效果，但不是平滑的，而是阶梯式的。比如，一个元素在移动时，你可以让它每隔一段距离“跳”一下，而不是匀速滑动。这在制作一些像素风格的游戏UI或者特殊视觉效果时非常有用。

甚至，有时候我会用

steps()

登录后复制

来模拟一些加载指示器，比如一个点点点逐个出现的动画，或者一个进度条以固定块状增长，而不是平滑填充。它提供了一种控制动画粒度的能力，让动画不再是连续的，而是可控的、离散的，这在很多场景下都能带来意想不到的视觉趣味。

结合JavaScript，如何实现更高级的打字机动画交互逻辑？

虽然纯CSS的打字机效果已经很棒了，但一旦涉及到更复杂的逻辑，比如多段文本的依次出现、中途暂停、删除重打，或者根据用户操作来触发动画，JavaScript的介入就变得不可避免，而且会让你事半功倍。

最常见的需求是多行文本的顺序打字。纯CSS很难做到一段打完再打下一段，但用JavaScript就能轻松实现。你可以把所有文本内容放在一个数组里，然后用

setTimeout

登录后复制

或者

Promise

登录后复制

链来控制每一段文本的打字动画。

基本思路是：

定义一个函数，接收文本内容作为参数，内部动态创建一个
```
<span>
```
登录后复制
或
```
<p>
```
登录后复制
元素，设置好CSS类。
将文本内容赋值给这个元素，并计算出字符数，用于
```
steps()
```
登录后复制
函数。
通过JavaScript动态添加这个元素到DOM中，并设置动画。
监听
```
animationend
```
登录后复制
事件，当当前段落的打字动画结束后，再调用函数处理下一段文本。

// 伪代码示例
const texts = [
  "这是第一段文字，会先打出来。",
  "然后是第二段，稍微长一点，模拟思考。",
  "最后是第三段，结束语。"
];
let textIndex = 0;

function typeText(text) {
  const container = document.querySelector('.typewriter');
  const p = document.createElement('p');
  p.textContent = text;
  container.appendChild(p);

  // 计算字符数
  const charCount = text.length;
  // 动态设置CSS变量，或者直接设置style属性
  p.style.setProperty('--char-count', charCount);
  p.style.animation = `typing ${charCount * 0.1}s steps(var(--char-count), end) forwards, blink-caret .75s step-end infinite`;

  p.addEventListener('animationend', () => {
    // 动画结束后，移除光标闪烁动画（可选）
    p.style.animation = `typing ${charCount * 0.1}s steps(var(--char-count), end) forwards`; 
    // 或者直接隐藏光标：p.style.borderRight = 'none';

    textIndex++;
    if (textIndex < texts.length) {
      setTimeout(() => typeText(texts[textIndex]), 1000); // 1秒后开始下一段
    }
  }, { once: true }); // 确保事件只触发一次
}

// 初始调用
typeText(texts[textIndex]);

登录后复制

除了顺序播放，JavaScript还能实现：

暂停与恢复：通过切换CSS类或者直接修改
```
animation-play-state
```
登录后复制
属性。
删除效果：反向动画，将
```
width
```
登录后复制
从100%变为0%，或者改变
```
overflow
```
登录后复制
和
```
white-space
```
登录后复制
。
用户交互触发：点击按钮开始打字，或者滚动到特定区域时激活动画。
动态内容：从API获取数据后，再进行打字动画展示。