文字逐字闪烁效果是指文字内容按照单个字符的顺序依次出现闪烁状态，停顿间隔均匀，整体呈现分帧式的动态效果，这种效果在页面提示、交互反馈等场景中应用广泛。实现该效果的核心是利用CSS的animation-steps()函数将连续的动画拆分为对应字符数量的分帧，配合关键帧控制文字的显示状态。
核心原理说明
要实现逐字闪烁，首先需要明确两个核心点：一是文字的显示范围需要通过容器宽度控制，二是动画的帧数要和文字的字符数量对应。animation-steps(n)的作用是将动画的总时长拆分为n个等长的阶段，每个阶段内动画状态保持不变，刚好符合逐字停顿的需求。比如文字有5个字符，就设置steps(5)，动画会在5个阶段内依次完成，每个阶段对应一个字符的显示。
基础实现步骤
1. HTML结构搭建
需要一个外层容器控制文字的显示宽度，内部放置完整的文字内容，通过overflow属性隐藏超出容器的部分。示例结构如下：
<div class="text-blink-container"> <span class="text-blink-content">加载中，请稍候</span> </div>
2. CSS样式配置
首先设置外层容器的宽度，初始宽度为0，内部文字不换行，然后定义关键帧动画，让宽度从0逐步增加到能容纳所有文字的宽度，同时配合steps()函数拆分动画帧数。
/* 外层容器样式 */
.text-blink-container {
width: 0;
overflow: hidden;
white-space: nowrap;
font-size: 20px;
color: #333;
/* 绑定动画，动画时长2秒，分5帧，无限循环 */
animation: blink 2s steps(5) infinite;
}
/* 内部文字样式，保持原宽度不收缩 */
.text-blink-content {
display: inline-block;
white-space: nowrap;
}
/* 关键帧定义，宽度从0到完整文字宽度 */
@keyframes blink {
0% {
width: 0;
}
100% {
/* 这里设置为文字的完整宽度，比如5个字符对应100px，可根据实际调整 */
width: 100px;
}
}
3. 闪烁效果增强
如果需要在文字显示的同时增加颜色闪烁，可以在关键帧中同时控制文字颜色，或者叠加另一个颜色变化的动画。比如让每个字符显示时颜色变为高亮，停顿后再恢复：
.text-blink-container {
width: 0;
overflow: hidden;
white-space: nowrap;
font-size: 20px;
color: #999;
/* 宽度动画 */
animation: widthBlink 2s steps(5) infinite, colorBlink 0.4s infinite alternate;
}
/* 宽度变化关键帧 */
@keyframes widthBlink {
0% { width: 0; }
100% { width: 100px; }
}
/* 颜色闪烁关键帧 */
@keyframes colorBlink {
0% { color: #999; }
100% { color: #ff4400; }
}
常见问题解决
- 如果文字闪烁时帧数不对，检查
steps()的参数是否和文字字符数量一致，比如文字有6个字符，参数就设为6。 - 如果文字宽度计算不准，可以给内部文字设置
width: max-content，然后外层容器的100%宽度就对应完整文字宽度，避免手动计算宽度的问题。 - 如果需要闪烁后重置，可以在关键帧中增加0%到100%的完整变化，同时设置
animation-fill-mode: forwards让动画结束后保持最后状态，或者去掉infinite让动画只执行一次。
完整示例代码
以下是一个可直接运行的完整示例，文字内容为"操作成功，即将跳转"，共8个字符，设置8帧逐字闪烁：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字逐字闪烁效果</title>
<style>
.blink-box {
width: 0;
overflow: hidden;
white-space: nowrap;
font-size: 24px;
font-weight: bold;
color: #666;
animation: textStep 3s steps(8) infinite, textColor 0.5s infinite alternate;
}
.blink-text {
display: inline-block;
white-space: nowrap;
}
@keyframes textStep {
0% { width: 0; }
100% { width: 192px; }
}
@keyframes textColor {
0% { color: #666; }
100% { color: #1890ff; }
}
</style>
</head>
<body>
<div class="blink-box">
<span class="blink-text">操作成功，即将跳转</span>
</div>
</body>
</html>
通过调整steps()的参数、动画时长和关键帧内容，还可以实现更多个性化的逐字动效，比如逐字淡入、逐字缩放等，核心思路都是利用分帧动画将连续变化拆分为对应字符数量的状态阶段。
CSS动画animation_steps逐字闪烁分帧动画文字特效修改时间：2026-07-17 22:36:29