实现css打字效果的核心在于width动画、overflow: hidden和steps()函数的协同使用。首先，设置文本容器初始状态为overflow: hidden、white-space: nowrap和width: 0，隐藏所有内容；接着通过@keyframes定义width从0到100%或固定字符宽度（如20ch）的动画；然后应用animation-timing-function: steps(n, end)，其中n为字符数，使动画分步显示字符；最后添加光标闪烁动画，通过border-right或伪元素结合独立动画实现。steps()函数将平滑过渡转为离散跳变，确保每个字符在对应步骤中瞬间显现。对于动态文本和响应式设计，需注意字符数匹配问题，必要时用javascript动态计算steps值及动画时长，并合理设置容器宽度以适配不同屏幕。
在CSS中实现打字效果，核心在于巧妙地结合width属性的动画、overflow: hidden以及animation-timing-function中的steps()函数。这三者的协同作用，能让文本内容像打字机一样一个字符一个字符地逐步显现，而不是平滑地从左到右延伸。
解决方案
要实现一个基础的打字效果，我们需要一个包裹文本的容器，并对其应用动画。
首先，设置文本容器的初始状态：
立即学习“前端免费学习笔记（深入）”；
overflow: hidden;: 这是关键，它会隐藏超出容器宽度的内容。white-space: nowrap;: 确保文本不会自动换行，保持单行显示，这对于宽度动画的精确控制很重要。width: 0;: 文本容器的初始宽度为零，这样所有文本都被隐藏。
接着，定义一个@keyframes动画，让容器的width从0逐渐增加到文本的实际宽度。这里的“实际宽度”通常是一个足够大的值，或者可以通过JavaScript动态获取，但在纯CSS示例中，我们可以给一个预估值或者max-content。
最核心的魔法在于animation-timing-function: steps(N, end);。steps()函数将动画过程分解为N个等长的步骤，而不是平滑过渡。当我们把N设置为文本字符的数量时，每一步动画的完成，就恰好对应一个字符的显现。end参数（或默认值）表示在每个步骤的末尾执行动画。
最后，将这个动画应用到文本容器上。
你好，这是一个CSS打字效果的演示。
.typing-container { font-family: monospace; /* 等宽字体有助于精确控制字符宽度 */ font-size: 24px; margin: 50px auto; width: fit-content; /* 让容器宽度适应内容，方便后续动画控制 */ max-width: 80%; /* 防止文本过长溢出 */ border-right: 2px solid; /* 模拟光标 */ white-space: nowrap; overflow: hidden; animation: typing 4s steps(20, end) forwards, /* 20是字符数，需要根据实际文本调整 */ blink-caret .75s step-end infinite;}/* 文本内容本身不需要特殊样式，它会被父容器的overflow和width控制 */.typing-text { display: inline-block; /* 确保其宽度能被父容器控制 */ /* 实际文本宽度会决定动画终点 */}@keyframes typing { from { width: 0 } to { width: 100% } /* 或者一个足够大的固定值，例如 20ch */}@keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: black; }}/* 针对长文本，可以考虑使用ch单位来精确控制宽度，1ch约等于一个字符的宽度 *//* @keyframes typing { from { width: 0 } to { width: 20ch } } */
这里需要注意的是，steps(20, end)中的20需要与你的文本字符数量大致匹配。如果文本是动态的，这个数字可能需要JavaScript来计算。forwards让动画停留在最后一帧。光标动画则是一个独立的、无限循环的border-right闪烁效果。
为什么直接使用width动画会显得生硬？steps()是如何解决这个问题的？
我最初尝试做打字效果时，直觉就是动画width，结果发现文本是平滑地从左边“生长”出来的，就像墨水慢慢渗透开一样，完全没有那种字符一个个跳出来的感觉。这其实很好理解，CSS的动画默认是平滑过渡的（ease、linear等），它会在动画持续时间内，将属性值从起点连续地变化到终点。width的平滑变化，意味着文本内容会像被裁剪的图片一样，逐渐露出完整的字形，而不是离散的字符显示。
steps()函数正是为了解决这种“生硬”或“连续”问题而生的。它就像一个离散的控制器，把整个动画时间轴切分成若干个等长的“步”。在每一步的开始或结束（取决于你选择start还是end），属性值会瞬间跳变到下一个预设的状态，而不是平滑过渡。对于打字效果，我们把steps()的数量设置为文本的字符数，那么每完成一个“步”，width就会恰好增加到能显示下一个字符的宽度。这样一来，视觉上就营造出了字符“跳出来”的错觉，完美模拟了打字机的逐字显示效果。它不是真的在“打字”，而是在极其精确的步进中，一点点揭示预先存在的文本。
腾讯Effidit
腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验
65 查看详情
如何让光标（caret）也动起来，模拟真实打字效果？
一个没有闪烁光标的打字效果总觉得少了点什么灵魂，对吧？它就像一个只有声音没有画面的电影。光标的闪烁，是打字机、命令行界面最经典的标志。在CSS中实现这个，思路其实很简单，我们通常会利用一个元素的border-right属性，或者一个伪元素（::after）来模拟光标。
最直接的方法就是给文本容器（或者打字效果的元素）添加一个border-right。然后，我们再定义一个独立的@keyframes动画，专门控制这个边框的颜色或透明度，让它周期性地在可见和不可见之间切换，形成闪烁效果。
比如，我们可以这样：
.typing-container { /* ... 其他样式 */ border-right: 2px solid black; /* 初始光标颜色 */ animation: typing 4s steps(20, end) forwards, blink-caret .75s step-end infinite; /* 新增光标闪烁动画 */}@keyframes blink-caret { from, to { border-color: transparent } /* 初始和结束时透明 */ 50% { border-color: black; } /* 中间时显示黑色 */}
这里blink-caret动画使用了step-end这个timing-function，它让颜色在50%这个时间点瞬间跳变，而不是平滑过渡，这样闪烁效果会更干脆利落，更像真实的光标。infinite则保证了光标会一直闪烁下去。
如果你的设计不允许直接在容器上加边框（比如容器有背景色或者边框本身有其他用途），你也可以考虑使用伪元素。给文本容器设置position: relative;，然后添加一个::after伪元素，将其定位在文本末尾，并设置其宽度、高度和背景色来模拟光标，再对这个伪元素进行闪烁动画。这种方法更灵活，但实现上会多一步定位的考量。不过，就打字效果而言，直接用border-right通常是最简洁有效的方案。
打字效果在不同文本长度和响应式设计中有什么需要注意的？
在实际应用中，文本长度往往不是固定的，而且我们的页面需要在各种屏幕尺寸下表现良好。这给纯CSS的打字效果带来了一些挑战，因为它本质上是基于固定字符数（steps()参数）和预设动画时长来工作的。
一个显著的问题是，如果steps()参数和文本的实际字符数不匹配，效果就会出错。字符数少了，动画结束前文本就显示完了；字符数多了，动画结束了文本还没显示完。这在纯CSS中是个硬伤，因为CSS无法动态获取文本长度。所以，对于动态文本，通常需要借助JavaScript来计算文本长度，然后动态设置steps()的参数和动画时长。例如，可以根据文本长度，设定每字符动画时长，然后计算总时长。
响应式设计方面，width: 100%或固定像素值在不同屏幕尺寸下可能会导致文本溢出或留白过多。我通常会结合使用max-width: 100%或者width: fit-content（如前面代码所示），这样容器能自动适应内容的最大宽度，同时不会超出父容器。但即便如此，@keyframes中to { width: ... }的值也需要足够大以覆盖所有可能的文本长度，或者使用ch单位（字符宽度单位），例如to { width: 20ch }，这在等宽字体下相对精确，但对于变宽字体则不那么可靠。
另外，光标的定位也需要注意。如果文本换行了（虽然我们通常会用white-space: nowrap避免），光标可能不会在文本末尾。还有，如果文本内容很长，动画时长设置不当，用户可能需要等待很久。所以，在设计时，要平衡好动画时长和用户体验。太快了看不清，太慢了又烦躁。
总的来说，纯CSS的打字效果对于固定、简短的文本非常适用，实现起来简洁优雅。但一旦涉及到动态内容、复杂的交互（比如暂停、回退、删除），或者对性能有极高要求时，JavaScript的介入几乎是不可避免的。JavaScript可以提供更精细的控制，例如逐字添加文本、动态调整动画参数，甚至模拟更复杂的打字机行为。但作为一种视觉增强，纯CSS方案在很多场景下已经足够出色。
以上就是CSS中如何实现打字效果_animation步骤控制的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1097131.html
微信扫一扫 
支付宝扫一扫 
