本文介绍一种简洁、高效且兼容性良好的方式——使用 css `@keyframes` 动画，替代易出错的 javascript 定时器逻辑，实现指定类名元素（如 `.bad`）在红白背景间规律闪烁。
JavaScript 实现背景色闪烁看似直观，但实际中容易陷入多个常见陷阱：例如 document.getElementsByClassName('Bad') 返回的是 HTMLCollection（类数组对象），不支持直接访问 style 属性，需遍历或取索引（如 [0]）；setInterval("blinkBG()", 300) 使用字符串形式调用函数存在安全与性能问题；而 badBG() 中的 for 循环纯属冗余——两次随机取值毫无意义，且未实现状态切换逻辑，导致颜色无法按预期交替。
更优解是交由 CSS 动画处理：声明式、性能高（利用 GPU 加速）、代码简洁、语义清晰。以下是推荐实现：
.bad {
padding: 30px;
animation: blink 300ms infinite;
}
@keyframes blink {
0%, 49.9% {
background-color: white;
}
50%, 99.9% {
background-color: red;
}
}对应 HTML 结构（注意类名小写，符合 CSS 命名惯例）：
I'm very bad
✅ 关键说明：
鼠标滑过图片遮罩层动画jQuery插件
下载
nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件。该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果，它可以设置遮罩层的前景色和背景色，可以制作圆形图片等，非常实用。
立即学习“前端免费学习笔记（深入）”；
- 动画周期设为 300ms，其中 0%–49.9% 显示白色，50%–99.9% 显示红色，实现近乎均等的“闪烁”节奏；
- 使用 infinite 确保持续循环；
- 类名统一采用小写 .bad（HTML 中 class="bad"），避免因大小写敏感导致样式不生效（尤其在 XHTML 或严格模式下）；
- 若需控制启停，可动态增删 animation-play-state: paused / running。
⚠️ 不建议继续使用原 JS 方案的原因：
- getElementsByClassName 返回集合，须遍历应用样式：Array.from(document.getElementsByClassName('Bad')).forEach(el => el.style.backgroundColor = color)；
- Math.random() 无法保证红白交替，仅产生随机色，违背“闪烁”本意；
- 高频 setInterval(300ms) 可能引发布局抖动，且无节流/防抖机制。
综上，CSS 动画是实现视觉闪烁效果的标准实践——语义明确、维护成本低、渲染性能优。优先选用它，让 JavaScript 专注业务逻辑而非 UI 动画。
