在css中制作数据标签文字逐个显现动画的核心思路是利用overflow: hidden和white-space: nowrap隐藏溢出文本，并结合steps()动画函数分步增加宽度以逐字显示。1. 使用等宽字体确保字符宽度一致；2. 设置初始宽度为0并隐藏溢出内容；3. 通过steps(n, end)将动画分为n步，每步显示一个字符；4. 可添加光标闪烁动画增强视觉效果；5. 对于不同长度文本，可通过css变量或javascript动态设置字符数和动画时间；6. 多个标签序列动画可通过animation-delay或nth-child伪类控制延迟实现。
在CSS里制作数据标签的文字逐个显现动画，核心思路其实是巧妙地利用overflow: hidden和white-space: nowrap来隐藏文本溢出部分，再结合steps()这个动画计时函数，让文本宽度以离散的步长逐渐增加，每一次增加都恰好显现一个字符，就像打字机一样。
解决方案
要实现这种效果，你需要一个包含文本的HTML元素，比如一个或
.data-tag { font-family: monospace; /* 确保等宽字体，方便计算 */ overflow: hidden; /* 隐藏超出容器的内容 */ white-space: nowrap; /* 文本不换行 */ width: 0; /* 初始宽度为0，完全隐藏文本 */ animation: typeWriter 3s steps(20, end) forwards; /* 核心动画 */ /* 额外添加打字机光标效果 */ border-right: 0.15em solid orange; /* 模拟光标 */ animation: typeWriter 3s steps(20, end) forwards, /* 打字动画 */ blinkCaret .75s step-end infinite; /* 光标闪烁动画 */}@keyframes typeWriter { from { width: 0; } to { width: 100%; } /* 最终宽度达到文本实际宽度 */}@keyframes blinkCaret { from, to { border-color: transparent; } 50% { border-color: orange; }}
HTML结构大概是这样：
立即学习“前端免费学习笔记（深入）”；
这是一个数据标签
这里面，steps(20, end)是魔法所在。它告诉浏览器，这个动画要分成20步完成，并且在每一步的末尾应用样式。如果你的文本有20个字符，那么每一步刚好显现一个字符。forwards则确保动画结束后，元素保持在最终状态（宽度100%）。至于光标，那就是额外的视觉增强，让效果更逼真。
为什么传统的transition或ease无法实现这种逐字效果？
这个问题嘛，其实挺直观的。当你用transition或者animation的默认计时函数（比如ease, linear）去改变元素的宽度时，它们会试图让这个变化过程尽可能地平滑、连续。想想看，从0宽度到100%宽度，如果用ease，你会看到文本像是被“拉伸”出来一样，或者说，它会以一种模糊、渐进的方式显现，而不是我们想要的“一字一跳”的感觉。
transition和那些平滑的animation-timing-function，它们的设计初衷就是为了创造视觉上的连贯性和流动感。它们会在动画过程中插值，计算出每毫秒应该处于的精确状态。但我们这种“逐字显现”的需求，本质上是一种离散的、非连续的视觉变化：一个字符完全出现，然后下一个，再下一个。这跟平滑插值的理念是相悖的。
而steps()，它就是专门为这种“分步走”的动画而生的。它强制动画在指定步数内完成，并且只在每一步的结束点更新样式。当结合overflow: hidden和white-space: nowrap时，每一步的宽度增加就精确地揭示了一个新字符，完美模拟了打字机那种一敲一显的效果。所以，不是transition或ease不够好，而是它们解决的问题类型不同。
如何应对不同长度文本的动画适配问题？
这确实是个实际操作中会遇到的麻烦事。如果你的数据标签文本长度不固定，那steps()里面的步数就不能写死，否则动画会显得太快或太慢，甚至显示不全。
腾讯Effidit
腾讯AI Lab开发的AI写作助手，提升写作者的写作效率和创作体验
65 查看详情
一个比较“CSS-only”的办法，是利用CSS自定义属性（变量）。你可以通过HTML元素的style属性或者JavaScript动态设置一个变量，来告诉CSS这个文本有多少个字符。
这是一个短标签这是一个稍长一点的数据标签
然后CSS可以这样写：
.data-tag { /* ...其他样式不变... */ animation: typeWriter calc(var(--char-count) * 0.1s) steps(var(--char-count), end) forwards, blinkCaret .75s step-end infinite;}@keyframes typeWriter { from { width: 0; } to { width: calc(var(--char-count) * 1em); } /* 假设字体大小为1em，等宽字体 */}
这里我把动画时间也和字符数关联起来了，calc(var(--char-count) * 0.1s)意味着每个字符显现0.1秒。to { width: calc(var(--char-count) * 1em); } 则是为了确保最终宽度能完全容纳所有字符，前提是使用了等宽字体（比如monospace）。
当然，最灵活、最精确的做法，可能还是得请JavaScript出马。JS可以精确地获取文本长度，然后动态地修改元素的animation-duration和animation-timing-function（特别是steps()的值）。比如，你可以监听某个事件，或者在页面加载时遍历所有.data-tag元素，计算其textContent.length，然后用element.style.setProperty('--char-count', length)来更新CSS变量，或者直接修改animation属性。这样虽然引入了JS，但解决了纯CSS难以动态适配的痛点。
如何为多个数据标签创建序列动画？
当你有多个数据标签需要逐个、或者说有间隔地显现时，我们不能让它们同时开始动画，那样就失去了“序列感”。这时，animation-delay就派上用场了。
最直接的方式是给每个标签设置不同的延迟：
标签一标签二标签三
/* 基础动画样式，同上，但可以去除光标动画，或者只给最后一个标签加光标 */.data-tag { font-family: monospace; overflow: hidden; white-space: nowrap; width: 0; /* 动画时间步数根据实际文本长度来，这里假设都是短文本 */ animation: typeWriter 1.5s steps(10, end) forwards; }@keyframes typeWriter { from { width: 0; } to { width: 100%; }}.tag-1 { animation-delay: 0s; } /* 第一个立即开始 */.tag-2 { animation-delay: 2s; } /* 第二个在第一个结束后（假设动画1.5s）再过0.5s开始 */.tag-3 { animation-delay: 4s; } /* 第三个再延迟 */
这种硬编码的方式，如果标签数量不多还好。但一旦数量多了，或者结构是动态生成的，手动写tag-1, tag-2就太笨拙了。
CSS的:nth-child()伪类在这里能发挥大作用：
.container .data-tag { /* 基础动画样式 */ animation: typeWriter 1.5s steps(10, end) forwards; }/* 利用nth-child()实现递增延迟 */.container .data-tag:nth-child(1) { animation-delay: 0s; }.container .data-tag:nth-child(2) { animation-delay: 2s; }.container .data-tag:nth-child(3) { animation-delay: 4s; }/* ...以此类推，或者使用循环预处理器如Sass来生成 */
当然，如果你需要更精细的控制，比如每个标签的动画时间根据自身文本长度决定，并且还要序列播放，那JavaScript就几乎是不可避免的了。JS可以计算每个标签的动画总时长，然后为下一个标签计算出准确的animation-delay。这能确保动画的流畅衔接，避免了纯CSS在处理复杂序列时的局限性。毕竟，CSS虽然强大，但它在处理动态、依赖上下文的逻辑时，还是有其边界的。
以上就是CSS中如何制作数据标签动画—文字逐个显现效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1098619.html
微信扫一扫
支付宝扫一扫
