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结构可以非常简单：
立即学习“前端免费学习笔记（深入）”；
你好，世界！这是一段模拟打字效果的文本。
接下来是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; } /* 光标显示 */}
这段代码的核心思想是：
overflow: hidden;
和
white-space: nowrap;
确保了文本在宽度变化时不会溢出或换行，只显示当前宽度内的内容。
width: 0;
是动画的起点，让文本最初是隐藏的。
border-right: 0.15em solid orange;
创建了一个竖线，它就是我们模拟的光标。
em
单位让光标大小与字体大小相关联，更具适应性。
animation: typing 4s steps(40, end) forwards;
是打字效果的主体。
typing
是动画名称，
4s
是动画持续时间。
steps(40, end)
是最关键的部分，它将整个动画过程分成40个等步长，每个步长代表一个字符的出现。
end
表示在每个步长的末尾进行过渡，使得字符在步长结束时立即显示。
forwards
确保动画结束后停留在最后一帧，即文本完全显示的状态。
animation: blink-caret 0.75s step-end infinite;
则是光标的闪烁动画。
blink-caret
是动画名称，
0.75s
是闪烁周期，
step-end
意味着动画在每个步长的末尾突然变化，而不是平滑过渡，这符合光标瞬间消失和出现的效果。
infinite
让光标无限闪烁。
为什么
steps()
函数对于打字机效果如此重要？
在我看来，
steps()
函数是实现打字机效果的“灵魂”所在。如果不用它，而是用
ease
、
linear
或其他常见的缓动函数，你会发现文本的出现会是平滑的、连续的，就像是文字被“擦”出来一样，而不是一个字符一个字符地“跳”出来。这完全失去了打字机那种机械、逐字呈现的独特韵味。
steps(N, )
函数的作用是将动画的整个持续时间分割成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
就是延迟时间。
Replit Ghostwrite
一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。
93 查看详情
多行文本的处理：这是打字机效果的一个常见挑战。因为
white-space: nowrap;
会将所有文本强制显示在一行，所以直接应用在多行文本上会导致文本溢出。要实现多行打字效果，通常需要更复杂的JavaScript逻辑，或者对CSS进行一些变通：
一种纯CSS的思路是，将每行文本包裹在独立的元素中，然后对每个元素应用单独的打字动画，并使用
animation-delay
来错开每行开始的时间。
这是第一行文本。
这是第二行文本，它会稍后出现。
第三行，再晚一点。
.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，动态计算字符数和设置动画参数。
实际项目中，打字机效果有哪些常见的优化和变体？
在真实的项目中，打字机效果很少是孤立存在的，它往往需要与用户体验、性能和可维护性结合考虑。
动态文本长度适应：硬编码
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
。
光标样式的多样化：除了简单的竖线，光标还可以是下划线、方块、或者自定义的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; /* 移除原来的边框光标 */}
这样光标的样式就更灵活了。
结合音频反馈：为了增强沉浸感，可以为每个字符的出现播放一个轻微的打字机敲击声。这需要JavaScript来监听动画的进度，并在每个字符出现时触发音频播放。当然，这要小心，频繁的音频播放可能会影响性能或显得过于嘈杂。
文本擦除效果：有些场景下，我们不仅希望文本能打出来，还能“擦除”掉，然后再打出新的文本。这通常需要结合
animation-direction: alternate
或更复杂的JavaScript来控制多个动画阶段，比如一个
typing
动画，接着一个
erasing
动画（将
width
从100%变回0），然后可能再一个
typing
动画。
性能考量：对于非常长的文本，或者页面上有多个打字机效果时，纯CSS动画可能会消耗较多资源。此时，可以考虑使用
requestAnimationFrame
配合JavaScript手动更新文本内容，或者对动画进行优化，比如只在视口内可见时才激活动画。
总的来说，打字机效果是一个很好的CSS
@keyframes
实战案例，它展示了如何将简单的动画属性与巧妙的函数结合，创造出富有表现力的用户体验。在实际应用中，我们总是在追求效果、性能和可维护性之间的最佳平衡。
以上就是CSS怎样制作打字机效果？@keyframes动画实战的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1089605.html
微信扫一扫 
支付宝扫一扫 
