- 要实现文字逐字闪烁效果，需将每个字符包裹在span标签中，并通过css变量和animation-delay实现交错延迟；2. 使用steps()函数可让闪烁呈现分帧式的硬切换效果，模拟老式屏幕的颗粒感；3. 结合animation-duration控制整体节奏，steps(1, end)确保状态瞬间切换，避免平滑过渡；4. 通过calc(var(–i, 0) * 0.1s)动态计算每个字符的延迟，实现逐字依次闪烁；5. 除闪烁外，steps()还可用于打字机、帧动画等需要离散变化的视觉效果，提升动态表现力。
想要在CSS里实现文字逐字闪烁的效果，特别是结合
animation-step
也就是
steps()
来做分帧动画，其实核心思路就是把每个文字单独拎出来，给它们一个交错的动画延迟，同时利用
steps()
让闪烁效果更“硬”一点，有那种老式屏幕或者数字显示的颗粒感。这并不是那种平滑的淡入淡出，而是更像一个开关，啪地一下亮，啪地一下灭。
解决方案
要实现这个效果，我们需要一点点HTML结构上的配合，把每个字符都包裹在一个
<span>
标签里，然后利用CSS变量来控制每个
<span>
的动画延迟。这样既灵活又方便。
<span>C<span>S<span>S <span>闪<span>烁<span>效<span>果 <span>真<span>酷
.flicker-text-container {
font-family: 'monospace', 'Courier New', monospace; /* 模拟数字显示字体 */
font-size: 3em;
color: #0f0; /* 经典的绿色荧光效果 */
text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 20px #0f0; /* 增加辉光效果 */
background-color: #1a1a1a;
padding: 20px;
display: inline-block; /* 让容器适应内容宽度 */
overflow: hidden; /* 防止文字溢出容器 */
}
.flicker-text-container p {
display: flex; /* 让文字排成一行 */
white-space: pre; /* 保留空格，如果需要 */
margin: 0; /* 移除默认外边距 */
}
.flicker-text-container span {
/* 核心动画 */
animation: reveal-flicker 1.5s infinite; /* 动画持续时间，无限循环 */
opacity: 0; /* 默认隐藏 */
/* 计算每个字符的延迟 */
/* --i 是通过 JavaScript 或者预处理器设置的，这里我们手动模拟一下 */
/* 实际应用中可以这样： span:nth-child(1) { --i: 1; } span:nth-child(2) { --i: 2; } */
/* 或者用 JS 动态添加 */
animation-delay: calc(var(--i, 0) * 0.1s); /* 每个字符延迟0.1秒出现 */
/* 确保动画结束后保持状态 */
animation-fill-mode: forwards;
}
/* 关键帧动画定义 */
@keyframes reveal-flicker {
0% {
opacity: 0; /* 开始时完全透明 */
}
10% {
opacity: 1; /* 快速出现 */
}
15%, 25%, 35%, 45% { /* 模拟闪烁的快速变化 */
opacity: 0;
}
20%, 30%, 40%, 50% {
opacity: 1;
}
55% {
opacity: 0; /* 闪烁结束后再次隐藏 */
}
100% {
opacity: 0; /* 动画周期结束时保持隐藏，等待下一次循环 */
}
}
/*
如果想让闪烁更“硬核”，更像“分帧”效果，可以结合 steps()
比如，让它只在两个状态间跳跃：
*/
@keyframes hard-flicker {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
/*
然后将 animation 属性修改为：
animation: reveal-flicker 1.5s infinite, hard-flicker 0.2s steps(1, end) infinite calc(var(--i, 0) * 0.1s + 0.1s);
但这样会同时运行两个动画，通常我们会把闪烁逻辑直接写进一个 keyframe 里。
上面的 `reveal-flicker` 已经包含了多段 `opacity` 变化，本身就模拟了分帧。
如果非要用 `steps()` 来控制，那通常是针对一个持续的、每帧内容都不同的动画，
或者像下面这样，让闪烁的“开”和“关”是瞬间切换的。
*/
/* 这是一个更纯粹的，用 steps(1, end) 模拟的硬核闪烁 */
@keyframes stepped-on-off {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
/*
如果想让每个字符先出现，然后开始硬核闪烁，可以这样组合动画：
span {
animation: appear 0.1s forwards calc(var(--i, 0) * 0.05s),
stepped-on-off 0.3s steps(1, end) infinite calc(var(--i, 0) * 0.05s + 0.1s);
}
@keyframes appear { 0% { opacity: 0; } 100% { opacity: 1; } }
*/
注意： 上面的HTML中
<span>
的
style="--i:X;"
只是为了演示
var(--i)
的用法。在实际项目中，你可能需要用JavaScript动态地给每个
<span>
添加这个自定义属性，或者利用CSS预处理器（如Sass）循环生成。
<span>立即学习“前端免费学习笔记（深入）”；
为什么选择
steps()
而不是
ease
或
linear
？
在我看来，
steps()
函数是实现这种“非线性”、“跳跃式”动画效果的利器，它跟
ease
或
linear
这些平滑的过渡函数完全是两种哲学。当我们谈到“分帧”或者“逐字闪烁”时，我们脑海里浮现的往往不是那种柔和的渐变，而是像老旧CRT显示器、数字时钟或者故障画面那种一格一格、一跳一跳的视觉体验。
steps()
的魔力就在于它能把一个动画过程强行拆分成你指定的N个离散的“步”或者“帧”。比如
steps(1, end)
，它会让动画从0%直接跳到100%的最终状态，中间没有任何过渡，就像一个灯泡瞬间亮起或熄灭。这对于模拟那种数字化的、机械的、或者带点故障感的闪烁效果来说，简直是绝配。它避免了模糊和渐变，让每一次状态的切换都显得果断而突兀，这正是“分帧”所追求的视觉冲击力。相比之下，
ease
曲线会先慢后快再慢，
linear
则是匀速，它们都过于“文明”和“流畅”，无法传达那种“卡顿”或“瞬间切换”的独特美感。所以，如果你想让文字闪烁得更有“性格”，更像某种数字信号的传输，那
steps()
绝对是你的首选。
如何调整闪烁的速度和频率？
调整这种逐字闪烁的速度和频率，其实就是玩转
animation
属性里的几个参数。这就像是调音师在调整音轨的节奏和音色一样，每个参数都有它独特的贡献。
首先是
animation-duration
，它决定了一个完整的闪烁周期有多长。你把它设成
1.5s
，那整个动画从头到尾就是1.5秒。想要闪得更快，就把这个值调小，比如
0.5s
；想要慢悠悠地闪，就调大。
接着是
animation-iteration-count
，这玩意儿控制动画要重复多少次。我们通常会设成
infinite
，让它无限循环，这样文字就能一直闪下去。如果你只想让它闪个几下就停，那就直接填数字，比如
3
。
然后是
steps()
里的那个参数，比如
steps(1, end)
里的
1
。这个数字决定了动画在一个周期内有多少个“离散的步”。对于闪烁，我们通常用
steps(1)
或
steps(2)
，因为这能制造最突然的“开”和“关”效果。如果你把这个数字调大，比如
steps(10)
，那闪烁看起来就会没那么生硬，甚至有点像平滑过渡了，因为它在每个周期内有了更多的中间状态。所以，要保持那种“帧感”，这个数字通常要小。
最后，也是最关键的“逐字”部分的灵魂，是
animation-delay
。这个参数控制每个字符动画开始的时间点。我们通过CSS变量
var(--i)
来给每个
<span>
一个递增的延迟，比如
calc(var(--i, 0) * 0.1s)
。这意味着第一个字符（
--i:1
）延迟0.1秒开始闪烁，第二个字符（
--i:2
）延迟0.2秒，以此类推。调整
0.1s
这个值，就能控制文字逐字出现的“节奏感”。值越小，文字出现的速度越快，感觉就像一串光快速扫过；值越大，文字一个接一个地慢悠悠地亮起来，更有序。
把这些参数组合起来，你就能像指挥乐队一样，精确控制文字闪烁的整体速度、每个字的出现节奏，以及闪烁本身的“硬度”或“柔和度”。
除了闪烁，
steps()
还能实现哪些酷炫的文字效果？
steps()
的能力远不止于文字闪烁，它简直是为各种“非连续性”或“帧动画”效果而生的。在我看来，它就是CSS里那个能把时间切片、把过程具象化的魔术师。
一个非常经典的用法就是“打字机”效果。你想象一下，文字不是一下子全部出现，而是一个字符一个字符地蹦出来，就像老式打
暂无评论内容