CSS打字机动效怎么实现？steps()函数详解

哈喽！今天心血来潮给大家带来了《CSS打字机动画怎么实现？steps()函数全解析》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

CSS实现打字机动画效果，核心在于巧妙利用steps()函数来控制文本宽度以离散的步进方式增长，同时结合overflow: hidden和white-space: nowrap来隐藏超出部分，并模拟光标闪烁。这套组合拳下来，你就能用纯CSS搞定一个相当逼真的打字效果了。

解决方案

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

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

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

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

然后是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则保证了光标会一直闪烁下去。

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

除了打字机效果，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链来控制每一段文本的打字动画。

基本思路是：

1. 定义一个函数，接收文本内容作为参数，内部动态创建一个或

   元素，设置好CSS类。

2. 将文本内容赋值给这个元素，并计算出字符数，用于steps()函数。
3. 通过JavaScript动态添加这个元素到DOM中，并设置动画。
4. 监听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获取数据后，再进行打字动画展示。

这些高级交互，都是纯CSS难以企及的，JavaScript提供了灵活的控制能力，让你的打字机动画不仅仅是静态展示，而是能与用户、与数据进行深度互动。

理论要掌握，实操不能落！以上关于《CSS打字机动效怎么实现？steps()函数详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！