CSS怎样制作打字机效果？@keyframes动画实战

雪夜

发布时间：2025-08-08 11:26:01

457人浏览过

来源于php中文网

原创

css制作打字机效果的核心是利用@keyframes定义动画，结合steps()函数实现字符逐个显示，并通过border-right模拟光标闪烁；1. 首先设置文本容器的overflow: hidden和white-space: nowrap，确保文本不换行且超出部分隐藏；2. 将文本初始宽度设为0，通过animation调用typing动画逐步增加宽度至100%；3. 使用steps(n, end)将动画分割为n个离散步长，使文本以字符为单位逐个显现，其中n应匹配文本字符数；4. 定义typing动画从width: 0到width: 100%，实现打字过程；5. 同时应用blink-caret动画，通过border-color在透明与实色间切换，模拟光标闪烁；6. 控制打字速度可通过调整animation-duration和steps()的步数，延迟启动可添加animation-delay；7. 多行文本需将每行封装为独立元素，分别设置animation-delay以错开打字时机，并仅在最后一行保留光标闪烁；8. 优化方案包括使用css变量配合javascript动态计算字符数和动画时长，提升可维护性；9. 光标样式可通过伪元素自定义为方块、下划线或图标；10. 可结合javascript实现音频反馈、文本擦除重打或视口懒加载，平衡效果与性能。该方案以纯css实现基础效果，辅以js增强灵活性和交互性，最终达成自然、可复用的打字机动画。

CSS怎样制作打字机效果？@keyframes动画实战

CSS制作打字机效果，核心在于巧妙利用

@keyframes

动画来控制文本容器的宽度，并结合

steps()

函数模拟字符逐个出现的视觉效果，同时用一个独立的动画来让光标闪烁。这听起来可能有点绕，但实际上，它的原理非常直观，而且实现起来并不复杂。

解决方案

要实现一个基础的打字机效果，我们通常需要一个包含文本的HTML元素，以及一些CSS来控制它的显示和动画。

首先，HTML结构可以非常简单：

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


  你好，世界！这是一段模拟打字效果的文本。

接下来是CSS部分，这是关键：

.typewriter-container {
  width: 100%; /* 或者一个固定宽度 */
  max-width: 600px; /* 限制容器最大宽度 */
  margin: 50px auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  color: #333;
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  background-color: #f9f9f9;
}

.typewriter-text {
  /* 关键属性 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  white-space: nowrap; /* 确保文本不换行 */
  width: 0; /* 初始宽度为0，文本不可见 */
  border-right: 0.15em solid orange; /* 模拟光标 */
  box-sizing: border-box; /* 边框包含在宽度内 */

  /* 动画 */
  animation:
    typing 4s steps(40, end) forwards, /* 打字动画 */
    blink-caret 0.75s step-end infinite; /* 光标闪烁动画 */
}

/* 定义打字动画 */
@keyframes typing {
  from { width: 0 }
  to { width: 100% } /* 最终宽度达到容器的100% */
}

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

这段代码的核心思想是：

```
overflow: hidden;
```
和
```
white-space: nowrap;
```
确保了文本在宽度变化时不会溢出或换行，只显示当前宽度内的内容。
```
width: 0;
```
是动画的起点，让文本最初是隐藏的。
```
border-right: 0.15em solid orange;
```
创建了一个竖线，它就是我们模拟的光标。
```
em
```
单位让光标大小与字体大小相关联，更具适应性。
```
animation: typing 4s steps(40, end) forwards;
```
是打字效果的主体。
```
typing
```
是动画名称，
```
4s
```
是动画持续时间。
```
steps(40, end)
```
是最关键的部分，它将整个动画过程分成40个等步长，每个步长代表一个字符的出现。
```
end
```
表示在每个步长的末尾进行过渡，使得字符在步长结束时立即显示。
```
forwards
```
确保动画结束后停留在最后一帧，即文本完全显示的状态。
```
animation: blink-caret 0.75s step-end infinite;
```
则是光标的闪烁动画。
```
blink-caret
```
是动画名称，
```
0.75s
```
是闪烁周期，
```
step-end
```
意味着动画在每个步长的末尾突然变化，而不是平滑过渡，这符合光标瞬间消失和出现的效果。
```
infinite
```
让光标无限闪烁。

为什么

steps()

函数对于打字机效果如此重要？

在我看来，

steps()

函数是实现打字机效果的“灵魂”所在。如果不用它，而是用

ease

、

linear

或其他常见的缓动函数，你会发现文本的出现会是平滑的、连续的，就像是文字被“擦”出来一样，而不是一个字符一个字符地“跳”出来。这完全失去了打字机那种机械、逐字呈现的独特韵味。

steps(N, )

函数的作用是将动画的整个持续时间分割成N个等长的“步长”。在每个步长内，动画属性的值会保持不变，直到步长结束时，它会瞬间跳到下一个值。对于打字机效果来说，这个“跳”就完美模拟了每个字符被敲击并显示出来的过程。

具体到我们的例子：

steps(40, end)

意味着整个

typing

动画（4秒）被分成了40个瞬间的跳跃。由于我们的文本有大约40个字符（中文和英文的字符计数可能略有不同，这里只是个粗略的匹配），每个跳跃就对应着文本宽度增加到恰好能显示下一个字符的长度。

end

关键字确保了宽度变化发生在每个步长的末尾，这样字符会在步长结束时“突然”出现，而不是在步长开始时。这种离散的变化，正是我们追求的打字机质感。没有它，效果会大打折扣，显得非常不自然。

如何控制打字速度和延迟，并处理多行文本？

控制打字速度，主要是调整

typing

动画的

duration

（持续时间）和

steps()

函数的第一个参数（步数）。

持续时间：增加
```
duration
```
（例如从4s到8s），打字速度会变慢；减少则会加快。
步数：理论上，
```
steps()
```
的步数应该等于或略大于你文本的字符数。如果步数太少，字符会出现得太快，可能会一次性显示多个；如果步数太多，在文本末尾可能会出现光标长时间停顿等待动画结束的情况。一个经验法则是，计算文本的字符数，然后将这个数字作为
```
steps()
```
的步数。

例如，如果你的文本有50个字符，你可以设置

steps(50, end)

。

延迟（Delay）：如果你想让打字效果在页面加载后稍等片刻再开始，可以在

animation

属性中添加

animation-delay

。

.typewriter-text {
  /* ...其他属性 */
  animation:
    typing 4s steps(40, end) forwards 1s, /* 1秒延迟后开始打字 */
    blink-caret 0.75s step-end infinite;
}

这里

1s

就是延迟时间。

奥硕企业网站管理系统3.0.2

临沂奥硕软件有限公司拥有国内一流的企业网站管理系统，奥硕企业网站管理系统真正会打字就会建站的管理系统，其强大的扩展性可以满足企业网站实现各种功能（唯一集成3O多套模版的企业建站系统）奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自

下载

多行文本的处理：这是打字机效果的一个常见挑战。因为

white-space: nowrap;

会将所有文本强制显示在一行，所以直接应用在多行文本上会导致文本溢出。要实现多行打字效果，通常需要更复杂的JavaScript逻辑，或者对CSS进行一些变通：

一种纯CSS的思路是，将每行文本包裹在独立的元素中，然后对每个元素应用单独的打字动画，并使用

animation-delay

来错开每行开始的时间。


  这是第一行文本。
  这是第二行文本，它会稍后出现。
  第三行，再晚一点。

.typewriter-container-multiline {
  font-family: 'Courier New', Courier, monospace;
  font-size: 20px;
  color: #333;
  margin: 50px auto;
  max-width: 600px;
}

.typewriter-container-multiline p {
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 0.15em solid orange;
  animation:
    typing-multiline 2s steps(20, end) forwards,
    blink-caret 0.75s step-end infinite;
  margin-bottom: 5px; /* 行间距 */
}

/* 针对每行设置不同的延迟 */
.line-1 { animation-delay: 0s, 0s; }
.line-2 { animation-delay: 2.5s, 2.5s; /* 等第一行打完后，再延迟一点 */ }
.line-3 { animation-delay: 5s, 5s; }

/* 调整光标动画，让它在文本打完后才开始闪烁 */
.typewriter-container-multiline p:not(:last-child) {
  border-right: none; /* 非最后一行不显示光标 */
  animation: typing-multiline 2s steps(20, end) forwards; /* 移除光标闪烁动画 */
}
/* 只有最后一行才需要光标闪烁 */
.typewriter-container-multiline p:last-child {
    animation:
        typing-multiline 2s steps(20, end) forwards,
        blink-caret 0.75s step-end infinite;
}

@keyframes typing-multiline {
  from { width: 0 }
  to { width: 100% }
}
/* blink-caret 动画同上 */

这种多行处理方式，每行都需要单独计算步数和延迟，维护起来会比较麻烦。更灵活的方案通常会结合JavaScript，动态计算字符数和设置动画参数。

实际项目中，打字机效果有哪些常见的优化和变体？

在真实的项目中，打字机效果很少是孤立存在的，它往往需要与用户体验、性能和可维护性结合考虑。

动态文本长度适应：硬编码
```
steps()
```
的步数是比较脆弱的。如果文本内容经常变化，每次都要手动修改CSS会很麻烦。更好的做法是，通过JavaScript获取文本长度，然后动态计算并设置CSS变量（
```
--char-count
```
）或直接修改
```
animation
```
属性。这样，CSS可以保持通用：
```
.typewriter-text {
  /* ... */
  animation:
    typing var(--typing-speed, 4s) steps(var(--char-count, 40), end) forwards,
    blink-caret 0.75s step-end infinite;
}
```
然后用JS来设置
```
--char-count
```
和
```
--typing-speed
```
。

光标样式的多样化：除了简单的竖线，光标还可以是下划线、方块、或者自定义的SVG图标。这通常通过改变

border-right

属性，或者用一个独立的

::after

伪元素来绘制光标并对其进行动画实现。例如，一个方块光标可以这样实现：

.typewriter-text::after {
  content: '';
  display: inline-block;
  width: 0.5em; /* 方块宽度 */
  height: 1em; /* 方块高度 */
  background-color: orange;
  vertical-align: middle; /* 对齐文本 */
  margin-left: 5px;
  animation: blink-caret 0.75s step-end infinite;
}
.typewriter-text {
    border-right: none; /* 移除原来的边框光标 */
}

这样光标的样式就更灵活了。

结合音频反馈：为了增强沉浸感，可以为每个字符的出现播放一个轻微的打字机敲击声。这需要JavaScript来监听动画的进度，并在每个字符出现时触发音频播放。当然，这要小心，频繁的音频播放可能会影响性能或显得过于嘈杂。
文本擦除效果：有些场景下，我们不仅希望文本能打出来，还能“擦除”掉，然后再打出新的文本。这通常需要结合
```
animation-direction: alternate
```
或更复杂的JavaScript来控制多个动画阶段，比如一个
```
typing
```
动画，接着一个
```
erasing
```
动画（将
```
width
```
从100%变回0），然后可能再一个
```
typing
```
动画。
性能考量：对于非常长的文本，或者页面上有多个打字机效果时，纯CSS动画可能会消耗较多资源。此时，可以考虑使用
```
requestAnimationFrame
```
配合JavaScript手动更新文本内容，或者对动画进行优化，比如只在视口内可见时才激活动画。