CSS打字机效果实现方法及steps()动画详解

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《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结构：

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

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)，它会把你的动画时间分成N个等长的片段，然后在每个片段的末尾（end）瞬间跳到下一个状态。对于打字机效果来说，我们把文字容器的width从0动画到100%，如果用linear，文字会像墨水晕开一样逐渐显现，那根本不是打字。但用了steps(字符数, end)，每个“步”就对应了一个字符的宽度，动画每完成一步，就恰好显示出下一个字符，非常精确。

没有steps()，或者说没有这种阶梯式的动画控制，我们很难纯粹用CSS实现这种逐字显示的视觉效果。它是实现这种“机械感”和“真实感”的关键。

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

这确实是个挺实际的问题。我们知道，大多数非等宽字体（比如微软雅黑、宋体）中，字母'i'和'w'的宽度就差远了，汉字也比英文标点宽。如果你直接用width动画，在非等宽字体下，动画的步进可能就无法精确对应每个字符，导致有些字符提前显示，有些则被“挤”在一起，效果会有点怪。

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

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来控制光标的“瞬时”闪烁效果。我个人更倾向于第一种，因为代码更简洁，对于大多数打字机效果来说已经足够了。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~