17370845950

本文介绍一种简洁、高效且兼容性更好的方式——使用 css `@keyframes` 动画替代 javascript 定时器，实现元素背景色在红色与白色之间的规律闪烁。

直接通过 JavaScript 实现背景色“闪烁”看似直观，但原代码中存在多个关键问题：

• document.getElementsByClassName('Bad') 返回的是 HTMLCollection（类数组对象），不能直接访问 .style 属性，需遍历或取索引（如 [0]）；
• badBG() 函数中的 for 循环逻辑冗余，实际只返回随机颜色，无法保证红白交替的确定性节奏；
• 使用字符串形式的 setInterval("blinkBG()", 300) 存在安全与性能隐患，应传入函数引用；
• 3 毫秒（3ms）间隔远低于浏览器重绘帧率（通常 ≥16ms），不仅无效，还可能引发异常行为。

✅ 推荐方案：纯 CSS 动画——语义清晰、性能卓越、无需 JS 干预，且天然支持硬件加速。

✅ 正确实现（CSS + HTML）

.bad {
  padding: 30px;
  background-color: white; /* 初始背景色 */
  animation: blink 300ms infinite; /* 每300ms完整循环一次 */
}

@keyframes blink {
  0%, 49.9% {
    background-color: white;
  }
  50%, 99.9% {
    background-color: red;
  }
}

I'm very bad

? 提示：动画周期为 300ms，其中 0%–49.9% 显示白色，50%–99.9% 显示红色，实现接近 1:1 占空比的稳定闪烁。若需更慢/更快节奏，仅需调整 animation-duration 值（如 600ms 或 150ms）。

⚠️ 注意事项

• 类名大小写敏感：CSS 中使用 .bad，则 HTML 中必须写 class="bad"（而非 "Bad"），否则样式不生效；
• 若需 JavaScript 动态触发动画（如错误发生时开启/关闭闪烁），可配合 classList.toggle('blinking') 与对应 CSS 规则；
• 避免在可访问性敏感场景（如表单错误提示）中使用高频闪烁，建议遵循 WCAG 指南：闪烁频率应 ≤ 3 次/秒（即周期 ≥ 300ms），当前方案完全合规。

综上，CSS 动画是实现视觉闪烁效果的最佳实践——简洁、可靠、高性能，也更符合现代前端开发的分离原则。