🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS文本闪烁模板：使用animation: blink增强可视效果

📝 用途

此模板用于创建闪烁的文本动画。

📘 解释

此代码使用 `animation: blink` 和 `@keyframes` 来使文本每秒闪烁一次。

🔹 部分代码

<style>
  .blink-text {
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
</style>

💻 完整代码

<div class="blink-text">
  这个文本正在闪烁。
</div>

<style>
  .blink-text {
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }
</style>
已复制！

✨ 闪烁动画的实用技巧

紧急限时促销正在进行中！

衷心感谢您一直以来对本店的支持与厚爱。

为了回馈广大顾客，今天我们特别举办限时促销活动！热门商品以惊喜价格出售，千万不要错过这次绝佳机会！

促销商品一览

  • 高性能无线耳机
    ¥12,000 → ¥7,200（立减40%！）
  • 自动清扫机器人 R-500
    ¥35,000 → ¥24,500（立减30%！）
  • 有机棉浴巾三件套
    ¥5,000 → ¥3,000（立减40%！）

本次促销仅限今天23:59前！
商品售完即止，活动可能随时结束，恕不另行通知。

这是“现在就查看！”这类句子的使用示例。

闪烁动画适用于需要引起用户注意的重要元素。通过调整 animation: blink 的参数，可以创建多种效果。例如，使用 animation: blink 0.5s infinite; 可实现更快速的闪烁效果。

🌈 颜色变化动画

如果希望不仅仅改变透明度，还可以同时更改颜色。如下所示的代码：@keyframes blink { 0% { opacity: 1; color: red; } 50% { opacity: 0.5; color: blue; } 100% { opacity: 1; color: red; } } 可以实现颜色随闪烁变换，使元素更加显眼。

⏱ 动画时序控制

通过修改动画的时间函数，可以赋予动画更多变化。例如添加 animation-timing-function: ease-in-out; 可让动画过渡更加平滑，使用 animation-delay: 1s; 则可延迟动画开始时间。

请注意，从无障碍访问角度出发，闪烁动画不宜过度使用。根据 WCAG 指南，建议避免每秒闪烁超过 3 次，以免造成用户不适。请仅在如警告信息等确有必要时使用。

该技术非常适用于紧急通知、限时促销倒计时、表单必填标记等关键元素的视觉突出。若使用得当，将大大提升用户体验。

相关模板