CSS怎样制作文字打字机效果？steps()动画函数详解

要制作css文字打字机效果，核心是使用steps()动画函数配合width或clip-path属性，并添加闪烁光标；1. 使用html结构包裹文字内容；2. 通过css的@keyframes定义typing动画，利用width从0到100%变化并配合steps(字符数, end)实现逐字显示；3. 使用border-right或伪元素创建光标，并通过blink-caret动画配合step-end实现瞬时闪烁；4. 推荐使用等宽字体（如monospace）以确保字符宽度一致，避免非等宽字体导致的显示错位；5. 若追求更高精度，可考虑clip-path结合javascript动态计算，但通常优先选择等宽字体以简化实现；该方法能有效模拟真实打字过程，最终效果完整且视觉自然。

CSS要制作文字打字机效果，说白了，核心就是利用

steps()

width

clip-path

解决方案

实现打字机效果，我们主要依赖HTML结构、CSS动画（

@keyframes

steps()

HTML结构：

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

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

CSS样式：

.typewriter-container {
    width: fit-content; /* 让容器宽度自适应文字内容，确保动画的终点是文字的实际宽度 */
    overflow: hidden;   /* 隐藏超出宽度的文字 */
    border-right: .15em solid orange; /* 光标效果，一个右边框 */
    font-family: 'MonoLisa', 'Fira Code', monospace; /* 选用等宽字体是关键，效果会更自然 */
    font-size: 2em;
    white-space: nowrap; /* 确保文字不换行，否则动画会很奇怪 */
    margin: 50px auto;
    animation: 
        typing 4s steps(20, end) forwards, /* typing动画，20步，每步结束时显示字符，动画结束后保持最终状态 */
        blink-caret .75s step-end infinite; /* 光标闪烁动画，每步结束时切换状态，无限循环 */
}

/* typing动画：控制文字宽度 */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

/* blink-caret动画：控制光标闪烁 */
@keyframes blink-caret {
    from, to { border-color: transparent; } /* 初始和结束时透明 */
    50% { border-color: orange; } /* 中间时显示颜色 */
}

一点说明： 上面的代码中，

steps(20, end)

20

forwards

steps()

函数在打字机效果中为何如此关键？

我觉得吧，

steps()

ease

linear

steps()

想象一下，你打字的时候，是不是每敲一个键，屏幕上才出现一个字？这个过程不是渐变的，而是瞬间完成的。

steps()

比如，

steps(N, end)

end

width

linear

steps(字符数, end)

没有

steps()

如何处理不同字体宽度对打字机效果的影响？

这确实是个挺实际的问题。我们知道，大多数非等宽字体（比如微软雅黑、宋体）中，字母'i'和'w'的宽度就差远了，汉字也比英文标点宽。如果你直接用

width

我个人处理这个问题通常有几种方式：

GitHub Copilot

GitHub AI编程工具，实时编程建议

下载

1. 首选等宽字体（Monospace Font）：这是最直接、最有效的方法。等宽字体顾名思义，每个字符的宽度都是一样的。这样，

   width

   动画的每一步就能精确地对应一个字符的宽度，打字机效果自然就完美了。像

   monospace

   这个通用字体族，或者

   Fira Code

   、

   MonoLisa

   这类专门的编程字体，都是不错的选择。这也是我在解决方案里直接推荐

   font-family: monospace;

   的原因。

2. 利用

   ch

   单位（字符单位）：

   ch

   单位是CSS中一个比较有意思的单位，它大致等于字体中“0”这个字符的宽度。理论上，你可以用

   width: Nch;

   来设置宽度，N就是字符数。但这只是一个近似值，因为即使是等宽字体，

   ch

   也不一定完全精确对应所有字符的宽度，更何况非等宽字体。所以，我很少直接依赖

   ch

   来做打字机效果的精确控制，更多时候把它当做一个粗略的尺寸单位。

3. 考虑

   clip-path

   （更复杂但精确）：如果非要用非等宽字体，并且追求像素级的完美，那

   clip-path

   可能是一个选择。你可以通过

   clip-path: inset(0 100% 0 0)

   到

   clip-path: inset(0 0 0 0)

   来动画，然后用

   steps()

   。但这种方式实现起来要复杂得多，你可能需要用JavaScript来计算每个字符的精确宽度和对应的

   clip-path

   值，然后动态生成CSS变量或Keyframes。对于纯CSS的打字机效果，这通常是过度设计了，除非有非常特殊的视觉要求。

总结来说，我的建议是：优先使用等宽字体。 这能省去很多麻烦，而且效果通常已经非常出色。

如何为打字机效果添加逼真的光标闪烁动画？

一个没有闪烁光标的打字机效果，就像喝咖啡没加糖，总觉得少了点什么。光标的闪烁是打字机效果的灵魂伴侣，它让整个动画看起来更生动，更有“正在输入”的感觉。

实现光标闪烁动画，通常有两种思路：

1. 利用

   border-right

   属性：这是我上面代码里用的方法，也是最常用、最简洁的方式。我们给文字容器（或者一个包裹文字的伪元素）添加一个右边框，这个边框就充当了光标。然后，我们通过一个独立的

   @keyframes

   动画来控制这个边框的颜色或透明度，让它周期性地显示和隐藏。

   .typewriter-container {
       /* ... 其他样式 ... */
       border-right: .15em solid orange; /* 光标的颜色和粗细 */
       animation: 
           /* ... typing动画 ... */
           blink-caret .75s step-end infinite; /* 闪烁动画 */
   }
   
   @keyframes blink-caret {
       from, to { border-color: transparent; } /* 初始和结束时透明 */
       50% { border-color: orange; } /* 中间时显示颜色 */
   }

   这里

   step-end

   和

   steps(1, end)

   效果类似，它确保了光标是瞬间出现和消失，而不是平滑渐隐渐显，这更符合我们对光标的认知。

   infinite

   则让它无限循环闪烁。

2. 使用伪元素（

   ::after

   ）：如果你不想用边框，或者需要更复杂的光标样式（比如一个块状光标），可以使用伪元素。

   .typewriter-container {
       position: relative; /* 为伪元素定位提供参考 */
       /* ... 其他样式 ... */
   }
   
   .typewriter-container::after {
       content: '|'; /* 或者一个块状字符 */
       position: absolute;
       right: 0; /* 或者根据需要调整位置 */
       top: 0;
       bottom: 0;
       width: .15em; /* 光标宽度 */
       background-color: orange; /* 光标颜色 */
       animation: blink-caret-pseudo .75s step-end infinite;
   }
   
   @keyframes blink-caret-pseudo {
       from, to { opacity: 0; }
       50% { opacity: 1; }
   }

   这种方式更灵活，你可以把

   content

   设置成任何字符，或者干脆不设置

   content

   ，只通过

   width

   和

   background-color

   来创建一个块状光标。

两种方法各有优劣，但核心都是通过

steps()

step-end