使用css的@keyframes定义opacity在0和1间切换的动画，通过animation属性应用到文字，设置1秒周期、step-start timing和无限循环实现闪烁效果。

文字闪烁动画可以通过 CSS 的 @keyframes 和 animation 属性来实现。核心思路是让文字的不透明度在显示和隐藏之间循环变化，从而产生闪烁效果。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

0

查看详情

1. 使用 keyframes 定义闪烁动画

通过 @keyframes 创建一个动画，控制元素的 opacity（透明度）在 0 和 1 之间切换：

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

2. 应用动画到文字元素

将定义好的动画绑定到目标文字上，设置动画时长、次数和时间函数：

.blink-text {
  animation: blink 1s step-start infinite;
}

• 1s：动画周期为 1 秒
• step-start：让变化瞬间切换，无过渡，更像“闪烁”
• infinite：无限循环播放

3. 可选：使用 transition 实现简单闪烁（适合交互触发）

如果只想在鼠标悬停等操作时闪烁一次，可以用 transition 配合 javaScript 或 hover 状态：

.hover-blink:hover {
  opacity: 0;
  transition: opacity 0.5s;
}

4. 注意事项

虽然闪烁效果吸引眼球，但需注意：

• 避免频率过高，建议间隔不少于 0.5 秒
• 频繁闪烁可能影响可读性或引发光敏性癫痫，W3C 建议每秒闪烁不超过 3 次
• 对重要信息慎用，可考虑用颜色变化或轻微抖动替代

基本上就这些。用 @keyframes + animation 是最直接的方式，灵活控制节奏和样式，适合大多数场景。不复杂但容易忽略细节。