如何用CSS动画制作文字闪烁效果？CSS动画实现逐字高亮文本效果的方法是什么？

用CSS动画制作文字闪烁效果，以及实现逐字高亮文本效果，核心在于使用@keyframes定义状态变化，并通过给每个字符单独设置animation-delay来控制闪烁或高亮的节奏。下面直接看实现方式。

一、HTML结构准备

要把一段文字做成逐字高亮，需要先让每个字被单独包裹起来。最简单的方法是手动写多个<span>，也可以用脚本生成。这里用静态结构演示：

<div class="blink-text">
  <span style="--i:0">学</span>
  <span style="--i:1">习</span>
  <span style="--i:2">前</span>
  <span style="--i:3">端</span>
</div>

二、CSS闪烁与逐字高亮动画

利用CSS自定义属性--i表示字的序号，在动画里用calc()算出延迟时间，实现逐字错开高亮。

.blink-text span {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  /* 每个字动画时长1.2s，无限循环 */
  animation: blink 1.2s infinite;
  /* 根据--i计算延迟，形成逐字效果 */
  animation-delay: calc(var(--i) * 0.2s);
}

@keyframes blink {
  0%, 100% {
    color: #333;
    opacity: 1;
  }
  50% {
    color: #ff6600;
    opacity: 0.3;
  }
}

三、只做单纯闪烁不分先后

如果不需要逐字，只要整体文字闪烁，可去掉延迟，所有字一起变化：

.simple-blink {
  animation: blink 1s infinite;
}

四、用steps实现硬切换高亮

想让文字像打字机一样逐字亮起并保持，可用steps() timing function：

.type-highlight span {
  opacity: 0.2;
  animation: show 2s steps(1) infinite;
  animation-delay: calc(var(--i) * 0.3s);
}

@keyframes show {
  0%, 20% { opacity: 1; }
  21%, 100% { opacity: 0.2; }
}

五、注意事项

• animation-delay支持负值，可用于让动画从中途开始。
• 减少动画时长可增强紧张感，但要考虑可读性。
• 对无障碍访问，可加prefers-reduced-motion媒体查询关闭动画。

CSS动画处理文字闪烁与逐字高亮，性能优于JS定时器，且代码更易维护。

六、完整示例

<style>
.blink-text span {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  animation: blink 1.2s infinite;
  animation-delay: calc(var(--i) * 0.2s);
}
@keyframes blink {
  0%, 100% { color: #333; opacity: 1; }
  50% { color: #ff6600; opacity: 0.3; }
}
</style>

<div class="blink-text">
  <span style="--i:0">学</span>
  <span style="--i:1">习</span>
  <span style="--i:2">前</span>
  <span style="--i:3">端</span>
</div>

以上代码复制到HTML文件即可看到逐字闪烁高亮效果。通过调整keyframes里的颜色和opacity，以及--i对应的延迟，就能灵活控制用CSS动画制作文字闪烁效果与逐字高亮文本效果的呈现方式。

CSS_animationtext_blinkstep_highlight修改时间：2026-07-26 05:27:10