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

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

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

steps()

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

解决方案

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

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

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

<div class="typewriter-container">   <p class="typewriter-text">你好，世界！这是一段模拟打字效果的文本。</p> </div>

接下来是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; } /* 光标显示 */ }

这段代码的核心思想是：

1. overflow: hidden;

   和

   white-space: nowrap;

   确保了文本在宽度变化时不会溢出或换行，只显示当前宽度内的内容。

2. width: 0;

   是动画的起点，让文本最初是隐藏的。

3. border-right: 0.15em solid orange;

   创建了一个竖线，它就是我们模拟的光标。

   em

   单位让光标大小与字体大小相关联，更具适应性。

4. animation: typing 4s steps(40, end) forwards;

   是打字效果的主体。

   typing

   是动画名称，

   4s

   是动画持续时间。

   steps(40, end)

   是最关键的部分，它将整个动画过程分成40个等步长，每个步长代表一个字符的出现。

   end

   表示在每个步长的末尾进行过渡，使得字符在步长结束时立即显示。

   forwards

   确保动画结束后停留在最后一帧，即文本完全显示的状态。

5. animation: blink-caret 0.75s step-end infinite;

   则是光标的闪烁动画。

   blink-caret

   是动画名称，

   0.75s

   是闪烁周期，

   step-end

   意味着动画在每个步长的末尾突然变化，而不是平滑过渡，这符合光标瞬间消失和出现的效果。

   infinite

   让光标无限闪烁。

为什么

steps()

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

在我看来，

steps()

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

ease

、

linear

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

steps(N, <start|end>)

函数的作用是将动画的整个持续时间分割成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

就是延迟时间。

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

white-space: nowrap;

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

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

animation-delay

来错开每行开始的时间。

<div class="typewriter-container-multiline">   <p class="line-1">这是第一行文本。</p>   <p class="line-2">这是第二行文本，它会稍后出现。</p>   <p class="line-3">第三行，再晚一点。</p> </div>

.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，动态计算字符数和设置动画参数。

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

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

1. 动态文本长度适应：硬编码

   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

   。

2. 光标样式的多样化：除了简单的竖线，光标还可以是下划线、方块、或者自定义的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; /* 移除原来的边框光标 */ }

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

3. 结合音频反馈：为了增强沉浸感，可以为每个字符的出现播放一个轻微的打字机敲击声。这需要JavaScript来监听动画的进度，并在每个字符出现时触发音频播放。当然，这要小心，频繁的音频播放可能会影响性能或显得过于嘈杂。

4. 文本擦除效果：有些场景下，我们不仅希望文本能打出来，还能“擦除”掉，然后再打出新的文本。这通常需要结合

   animation-direction: alternate

   或更复杂的JavaScript来控制多个动画阶段，比如一个

   typing

   动画，接着一个

   erasing

   动画（将

   width

   从100%变回0），然后可能再一个

   typing

   动画。

5. 性能考量：对于非常长的文本，或者页面上有多个打字机效果时，纯CSS动画可能会消耗较多资源。此时，可以考虑使用

   requestAnimationFrame

   配合JavaScript手动更新文本内容，或者对动画进行优化，比如只在视口内可见时才激活动画。

总的来说，打字机效果是一个很好的CSS

@keyframes

实战案例，它展示了如何将简单的动画属性与巧妙的函数结合，创造出富有表现力的用户体验。在实际应用中，我们总是在追求效果、性能和可维护性之间的最佳平衡。