要制作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)
，它会把你的动画时间分成N个等长的片段，然后在每个片段的末尾（
end
）瞬间跳到下一个状态。对于打字机效果来说，我们把文字容器的
width
从0动画到100%，如果用
linear
，文字会像墨水晕开一样逐渐显现，那根本不是打字。但用了
steps(字符数, end)
，每个“步”就对应了一个字符的宽度，动画每完成一步，就恰好显示出下一个字符，非常精确。
没有
steps()
，或者说没有这种阶梯式的动画控制，我们很难纯粹用CSS实现这种逐字显示的视觉效果。它是实现这种“机械感”和“真实感”的关键。
如何处理不同字体宽度对打字机效果的影响？
这确实是个挺实际的问题。我们知道，大多数非等宽字体（比如微软雅黑、宋体）中，字母’i’和’w’的宽度就差远了，汉字也比英文标点宽。如果你直接用
width
动画，在非等宽字体下，动画的步进可能就无法精确对应每个字符，导致有些字符提前显示，有些则被“挤”在一起，效果会有点怪。
我个人处理这个问题通常有几种方式：
Replit Ghostwrite
一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。
93 查看详情
首选等宽字体（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; }}
这种方式更灵活，你可以把
content
设置成任何字符，或者干脆不设置
content
，只通过
width
和
background-color
来创建一个块状光标。
两种方法各有优劣，但核心都是通过
steps()
或者
step-end
来控制光标的“瞬时”闪烁效果。我个人更倾向于第一种，因为代码更简洁，对于大多数打字机效果来说已经足够了。
以上就是CSS怎样制作文字打字机效果？steps()动画函数详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1092481.html
微信扫一扫 
支付宝扫一扫 
