steps()函数是打字机效果的关键，因为它将动画分割为离散步骤，使字符逐个显示；具体来说，steps(n, end)中的n对应文本字符数，确保每个步骤显示一个字符，而end保证变化发生在步长末尾，避免显示不完整字符；相比之下，普通线性动画会使文字平滑出现，失去敲击键盘的节奏感。为处理不同长度文本，需动态计算字符数并更新css变量，javascript获取textcontent.length后赋值给–char-count，并调整动画时长–animation-duration，实现自适应。光标闪烁可通过border-right结合@keyframes或伪元素::after实现；前者利用边框颜色切换，后者通过伪元素content定义光标形状并控制opacity实现闪烁，两者均使用step-end确保瞬间切换，保持真实输入感。
CSS动画实现文字打字机特效，核心在于利用steps()函数控制字符逐个显示，并结合overflow: hidden和width动画来模拟输入过程。同时，一个闪烁的光标能大大增强效果的真实感，这通常通过边框动画或伪元素来实现。
解决方案
要实现一个基本的CSS打字机效果，你需要一段HTML文本，并配合相应的CSS样式。
HTML结构:
立即学习“前端免费学习笔记（深入）”；
你好，这是一个CSS打字机效果。
CSS样式:
.typewriter { font-family: 'Source Code Pro', monospace; /* 模拟打字机字体，可选 */ overflow: hidden; /* 隐藏超出容器的内容 */ white-space: nowrap; /* 文本不换行 */ border-right: .15em solid orange; /* 光标效果 */ width: 0; /* 初始宽度为0，文本不可见 */ animation: typing 3.5s steps(20, end) forwards, /* 打字动画 */ blink-caret .75s step-end infinite; /* 光标闪烁动画 */}/* 假设文本有20个字符，包括标点和空格 */@keyframes typing { from { width: 0 } to { width: 100% }}@keyframes blink-caret { from, to { border-color: transparent } /* 光标透明 */ 50% { border-color: orange; } /* 光标显示 */}
这段代码里，typing动画负责控制width从0到100%，配合steps(20, end)，让宽度以20个离散的步骤增长，每个步骤刚好显示一个字符。blink-caret动画则让右侧的边框周期性地显示和隐藏，模拟光标闪烁。forwards让动画结束后保持最终状态。
为什么steps()函数是打字机效果的关键？
说实话，steps()函数在CSS动画里是个挺特别的存在。它不像我们平时用的ease-in-out那样让动画平滑过渡，而是把整个动画过程切分成你指定数量的“步子”，每一步之间是瞬间完成的跳跃。对于打字机效果来说，这简直是天作之合。
你想啊，打字机不就是字符一个接一个地蹦出来吗？steps(N, end)中的N，我们通常会把它设成和文本字符数一样。这样，动画从width: 0到width: 100%的过程中，它会分成N个等长的“跳跃”，每跳一步，就恰好显示一个字符。end这个关键词也很重要，它确保了每一步的改变发生在步长的末尾，这让字符显示的时机感觉更自然，不会出现那种“半个字符”的尴尬。
没有steps()，你用普通的linear动画去改变width，那文字就会像水波一样平滑地涌出来，完全没有那种“敲击键盘”的节奏感。所以，可以说steps()是这个效果的灵魂所在，它赋予了动画离散的、逐帧的感觉，完美模拟了字符逐个出现的视觉体验。
如何处理不同长度文本的打字机效果？
这是个很实际的问题，也是很多人在实现打字机效果时遇到的一个“小坑”。上面的例子里，我们把steps()的值直接写死了20，这当然只适用于20个字符的文本。如果文本变了，比如变成了30个字符，那动画要么显示不全，要么就多出一段空白的“打字”时间。
腾讯Effidit
腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验
65 查看详情 
最直接但最笨的办法，就是每次文本长度变了，你就手动去改CSS里的steps()值。但显然，这不符合我们追求自动化和灵活性的原则。
一个更优雅的解决方案是结合JavaScript和CSS自定义属性（CSS变量）。我们可以用JavaScript来动态获取文本的长度，然后把这个长度值设置成一个CSS变量，最后在CSS里引用这个变量。
JavaScript 部分:
document.addEventListener('DOMContentLoaded', () => { const typewriterElement = document.querySelector('.typewriter'); if (typewriterElement) { // 假设文本内容是直接在HTML里，或者通过JS动态设置 const textContent = typewriterElement.textContent; // 注意：这里需要考虑中文字符和英文字符的长度计算方式 // 对于英文字符，textContent.length 即可 // 对于中文，一个汉字算一个字符，textContent.length 也通常没问题 // 如果有特殊字符或需要精确像素宽度，情况会复杂些 const charCount = textContent.length; // 设置CSS变量 typewriterElement.style.setProperty('--char-count', charCount); // 同时更新动画时长，让每秒打字速度保持一致 typewriterElement.style.setProperty('--animation-duration', charCount * 0.15 + 's'); // 假设每个字符0.15秒 }});
更新后的CSS样式:
.typewriter { --char-count: 1; /* 默认值，会被JS覆盖 */ --animation-duration: 0.15s; /* 默认值，会被JS覆盖 */ font-family: 'Source Code Pro', monospace; overflow: hidden; white-space: nowrap; border-right: .15em solid orange; width: 0; animation: typing var(--animation-duration) steps(var(--char-count), end) forwards, blink-caret .75s step-end infinite;}@keyframes typing { from { width: 0 } to { width: 100% }}@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; }}
通过这种方式，JavaScript会根据实际文本长度动态调整steps()的数量和动画总时长，让你的打字机效果无论文本多长，都能保持流畅和准确。这大大提升了组件的复用性和健壮性。
打字机效果中光标闪烁的实现技巧有哪些？
光标闪烁是打字机效果的“点睛之笔”，它让整个过程看起来更像真实的输入。实现这个效果，最常用也最直接的方法就是利用元素的border-right属性，并结合一个简单的CSS动画。
利用border-right和@keyframes:这是前面示例中用到的方法。给文本元素设置一个右边框，然后通过@keyframes动画，让这个边框的颜色在透明和实际颜色之间周期性切换。
.typewriter { /* ... 其他样式 ... */ border-right: .15em solid orange; /* 初始光标颜色 */ animation: /* ... 打字动画 ... */ blink-caret .75s step-end infinite; /* 光标闪烁动画 */}@keyframes blink-caret { from, to { border-color: transparent } /* 光标隐藏 */ 50% { border-color: orange; } /* 光标显示 */}
这里step-end很重要，它让颜色切换瞬间完成，而不是平滑过渡，这样光标看起来就像在“开关”一样，更真实。infinite则让它无限循环闪烁。
利用伪元素::after:有时，你可能不希望光标是元素的边框，或者需要更灵活的光标样式（比如一个竖线字符）。这时，可以使用伪元素::after来创建光标。
你好，这是一个CSS打字机效果。
.typewriter { position: relative; /* 为伪元素定位提供上下文 */ /* ... 其他打字机样式，但不要border-right了 ... */}.typewriter::after { content: '|'; /* 光标字符，也可以是空字符串配合border */ position: absolute; /* 相对于父元素定位 */ right: 0; /* 初始位置，需要根据实际情况调整 */ top: 0; bottom: 0; color: orange; /* 光标颜色 */ animation: blink-cursor .75s step-end infinite;}@keyframes blink-cursor { from, to { opacity: 0; } /* 光标隐藏 */ 50% { opacity: 1; } /* 光标显示 */}
这种方式的优点是光标样式更自由，你可以用content: '_'来模拟下划线光标，或者用background-color来创建一个方块光标。需要注意的是，当文本宽度变化时，伪元素可能需要更复杂的定位（比如依赖JS计算文本宽度来调整left或right）。不过，对于打字机效果，通常是文本完全显示后，光标才开始在末尾闪烁，所以简单定位到父元素右侧通常就够了。
无论哪种方法，关键都是利用@keyframes和step-end（或steps(1, end)）来制造那种“瞬间切换”的视觉效果，让光标看起来富有生命力。
以上就是CSS动画如何实现文字打字机特效 CSS动画模拟字符逐个输入过程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1096626.html
微信扫一扫 
支付宝扫一扫 
