CSS怎样制作文字打字机效果？steps()动画函数详解-css教程-PHP中文网

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

看不見的法師

发布： 2025-08-04 14:09:01

原创

857人浏览过

要制作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()动画函数详解

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)

登录后复制

里的

登录后复制

是我根据示例文字“你好，世界！这是一段打字机效果的文字。”的字符数量大概估算的。实际使用时，这个数字应该等于或略大于你的文字字符数（包括标点和空格）。

forwards

登录后复制

让动画结束后保持最终状态，不然文字会缩回去。

steps()

登录后复制

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

我觉得吧，

steps()

登录后复制

函数就是这个打字机效果的灵魂。它和我们平时用的

ease

登录后复制

、

linear

登录后复制

那种平滑过渡完全不一样。说白了，

steps()

登录后复制

让动画不再是连续的，而是变成了一系列离散的“跳跃”。

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

steps()

登录后复制

就完美模拟了这种“瞬间出现”的感觉。

比如，

steps(N, end)

登录后复制

，它会把你的动画时间分成N个等长的片段，然后在每个片段的末尾（

end

登录后复制

）瞬间跳到下一个状态。对于打字机效果来说，我们把文字容器的

width

登录后复制

从0动画到100%，如果用

linear

登录后复制

，文字会像墨水晕开一样逐渐显现，那根本不是打字。但用了

steps(字符数, end)

登录后复制

，每个“步”就对应了一个字符的宽度，动画每完成一步，就恰好显示出下一个字符，非常精确。

没有

steps()

登录后复制

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

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

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

width

登录后复制

动画，在非等宽字体下，动画的步进可能就无法精确对应每个字符，导致有些字符提前显示，有些则被“挤”在一起，效果会有点怪。

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

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

首选等宽字体（Monospace Font）：这是最直接、最有效的方法。等宽字体顾名思义，每个字符的宽度都是一样的。这样，
```
width
```
登录后复制
动画的每一步就能精确地对应一个字符的宽度，打字机效果自然就完美了。像
```
monospace
```
登录后复制
这个通用字体族，或者
```
Fira Code
```
登录后复制
、
```
MonoLisa
```
登录后复制
这类专门的编程字体，都是不错的选择。这也是我在解决方案里直接推荐
```
font-family: monospace;
```
登录后复制
的原因。
利用
```
ch
```
登录后复制
单位（字符单位）：
```
ch
```
登录后复制
单位是CSS中一个比较有意思的单位，它大致等于字体中“0”这个字符的宽度。理论上，你可以用
```
width: Nch;
```
登录后复制
来设置宽度，N就是字符数。但这只是一个近似值，因为即使是等宽字体，
```
ch
```
登录后复制
也不一定完全精确对应所有字符的宽度，更何况非等宽字体。所以，我很少直接依赖
```
ch
```
登录后复制
来做打字机效果的精确控制，更多时候把它当做一个粗略的尺寸单位。
考虑
```
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的打字机效果，这通常是过度设计了，除非有非常特殊的视觉要求。

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

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

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

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

利用
```
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
```
登录后复制
则让它无限循环闪烁。

使用伪元素（

::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; }
}

登录后复制

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