CSS动画如何实现文字打字机特效 CSS动画模拟字符逐个输入过程-css教程-PHP中文网

CSS动画如何实现文字打字机特效 CSS动画模拟字符逐个输入过程

絕刀狂花

发布： 2025-07-21 17:16:01

原创

482人浏览过

steps()函数是打字机效果的关键，因为它将动画分割为离散步骤，使字符逐个显示；具体来说，steps(n, end)中的n对应文本字符数，确保每个步骤显示一个字符，而end保证变化发生在步长末尾，避免显示不完整字符；相比之下，普通线性动画会使文字平滑出现，失去敲击键盘的节奏感。为处理不同长度文本，需动态计算字符数并更新css变量，javascript获取textcontent.length后赋值给--char-count，并调整动画时长--animation-duration，实现自适应。光标闪烁可通过border-right结合@keyframes或伪元素::after实现；前者利用边框颜色切换，后者通过伪元素content定义光标形状并控制opacity实现闪烁，两者均使用step-end确保瞬间切换，保持真实输入感。

CSS动画如何实现文字打字机特效 CSS动画模拟字符逐个输入过程

CSS动画实现文字打字机特效，核心在于利用steps()函数控制字符逐个显示，并结合overflow: hidden和width动画来模拟输入过程。同时，一个闪烁的光标能大大增强效果的真实感，这通常通过边框动画或伪元素来实现。

解决方案

要实现一个基本的CSS打字机效果，你需要一段HTML文本，并配合相应的CSS样式。

HTML结构:

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

<p class="typewriter">你好，这是一个CSS打字机效果。</p>

登录后复制

CSS样式:

.typewriter {
  font-family: 'Source Code Pro', monospace; /* 模拟打字机字体，可选 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  white-space: nowrap; /* 文本不换行 */
  border-right: .15em solid orange; /* 光标效果 */
  width: 0; /* 初始宽度为0，文本不可见 */
  animation: 
    typing 3.5s steps(20, end) forwards, /* 打字动画 */
    blink-caret .75s step-end infinite; /* 光标闪烁动画 */
}

/* 假设文本有20个字符，包括标点和空格 */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent } /* 光标透明 */
  50% { border-color: orange; } /* 光标显示 */
}

登录后复制

这段代码里，typing动画负责控制width从0到100%，配合steps(20, end)，让宽度以20个离散的步骤增长，每个步骤刚好显示一个字符。blink-caret动画则让右侧的边框周期性地显示和隐藏，模拟光标闪烁。forwards让动画结束后保持最终状态。

为什么`steps()`函数是打字机效果的关键？

说实话，steps()函数在CSS动画里是个挺特别的存在。它不像我们平时用的ease-in-out那样让动画平滑过渡，而是把整个动画过程切分成你指定数量的“步子”，每一步之间是瞬间完成的跳跃。对于打字机效果来说，这简直是天作之合。

你想啊，打字机不就是字符一个接一个地蹦出来吗？steps(N, end)中的N，我们通常会把它设成和文本字符数一样。这样，动画从width: 0到width: 100%的过程中，它会分成N个等长的“跳跃”，每跳一步，就恰好显示一个字符。end这个关键词也很重要，它确保了每一步的改变发生在步长的末尾，这让字符显示的时机感觉更自然，不会出现那种“半个字符”的尴尬。

没有steps()，你用普通的linear动画去改变width，那文字就会像水波一样平滑地涌出来，完全没有那种“敲击键盘”的节奏感。所以，可以说steps()是这个效果的灵魂所在，它赋予了动画离散的、逐帧的感觉，完美模拟了字符逐个出现的视觉体验。

如何处理不同长度文本的打字机效果？

这是个很实际的问题，也是很多人在实现打字机效果时遇到的一个“小坑”。上面的例子里，我们把steps()的值直接写死了20，这当然只适用于20个字符的文本。如果文本变了，比如变成了30个字符，那动画要么显示不全，要么就多出一段空白的“打字”时间。

来画数字人直播

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

查看详情

最直接但最笨的办法，就是每次文本长度变了，你就手动去改CSS里的steps()值。但显然，这不符合我们追求自动化和灵活性的原则。

一个更优雅的解决方案是结合JavaScript和CSS自定义属性（CSS变量）。我们可以用JavaScript来动态获取文本的长度，然后把这个长度值设置成一个CSS变量，最后在CSS里引用这个变量。

JavaScript 部分:

document.addEventListener('DOMContentLoaded', () => {
  const typewriterElement = document.querySelector('.typewriter');
  if (typewriterElement) {
    // 假设文本内容是直接在HTML里，或者通过JS动态设置
    const textContent = typewriterElement.textContent; 
    // 注意：这里需要考虑中文字符和英文字符的长度计算方式
    // 对于英文字符，textContent.length 即可
    // 对于中文，一个汉字算一个字符，textContent.length 也通常没问题
    // 如果有特殊字符或需要精确像素宽度，情况会复杂些
    const charCount = textContent.length; 

    // 设置CSS变量
    typewriterElement.style.setProperty('--char-count', charCount);
    // 同时更新动画时长，让每秒打字速度保持一致
    typewriterElement.style.setProperty('--animation-duration', charCount * 0.15 + 's'); // 假设每个字符0.15秒
  }
});

登录后复制

更新后的CSS样式:

.typewriter {
  --char-count: 1; /* 默认值，会被JS覆盖 */
  --animation-duration: 0.15s; /* 默认值，会被JS覆盖 */

  font-family: 'Source Code Pro', monospace;
  overflow: hidden;
  white-space: nowrap;
  border-right: .15em solid orange;
  width: 0;
  animation: 
    typing var(--animation-duration) steps(var(--char-count), end) forwards,
    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; }
}

登录后复制

通过这种方式，JavaScript会根据实际文本长度动态调整steps()的数量和动画总时长，让你的打字机效果无论文本多长，都能保持流畅和准确。这大大提升了组件的复用性和健壮性。

打字机效果中光标闪烁的实现技巧有哪些？

光标闪烁是打字机效果的“点睛之笔”，它让整个过程看起来更像真实的输入。实现这个效果，最常用也最直接的方法就是利用元素的border-right属性，并结合一个简单的CSS动画。

利用border-right和@keyframes: 这是前面示例中用到的方法。给文本元素设置一个右边框，然后通过@keyframes动画，让这个边框的颜色在透明和实际颜色之间周期性切换。
```
.typewriter {
  /* ... 其他样式 ... */
  border-right: .15em solid orange; /* 初始光标颜色 */
  animation: 
    /* ... 打字动画 ... */
    blink-caret .75s step-end infinite; /* 光标闪烁动画 */
}

@keyframes blink-caret {
  from, to { border-color: transparent } /* 光标隐藏 */
  50% { border-color: orange; } /* 光标显示 */
}
```
登录后复制
这里step-end很重要，它让颜色切换瞬间完成，而不是平滑过渡，这样光标看起来就像在“开关”一样，更真实。infinite则让它无限循环闪烁。
利用伪元素::after: 有时，你可能不希望光标是元素的边框，或者需要更灵活的光标样式（比如一个竖线字符）。这时，可以使用伪元素::after来创建光标。
```
<p class="typewriter">你好，这是一个CSS打字机效果。</p>
```
登录后复制
```
.typewriter {
  position: relative; /* 为伪元素定位提供上下文 */
  /* ... 其他打字机样式，但不要border-right了 ... */
}

.typewriter::after {
  content: '|'; /* 光标字符，也可以是空字符串配合border */
  position: absolute; /* 相对于父元素定位 */
  right: 0; /* 初始位置，需要根据实际情况调整 */
  top: 0;
  bottom: 0;
  color: orange; /* 光标颜色 */
  animation: blink-cursor .75s step-end infinite;
}

@keyframes blink-cursor {
  from, to { opacity: 0; } /* 光标隐藏 */
  50% { opacity: 1; } /* 光标显示 */
}
```
登录后复制
这种方式的优点是光标样式更自由，你可以用content: '_'来模拟下划线光标，或者用background-color来创建一个方块光标。需要注意的是，当文本宽度变化时，伪元素可能需要更复杂的定位（比如依赖JS计算文本宽度来调整left或right）。不过，对于打字机效果，通常是文本完全显示后，光标才开始在末尾闪烁，所以简单定位到父元素右侧通常就够了。