js 实现闪烁
使用 CSS 动画实现闪烁
通过 animation 和 @keyframes 定义透明度变化实现闪烁效果。CSS 动画性能更优，适合简单场景。
.blink {
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}<div class="blink">闪烁内容</div>使用 JavaScript 定时器实现闪烁
通过 setInterval 动态修改元素的 style.opacity 属性，适合需要精细控制闪烁逻辑的场景。
const element = document.getElementById('blink-element');
let visible = true;
setInterval(() => {
visible = !visible;
element.style.opacity = visible ? '1' : '0';
}, 500);使用类切换实现闪烁
通过定时切换 CSS 类实现，可复用 CSS 样式且便于维护。
.blink-off {
opacity: 0;
transition: opacity 0.3s;
}const element = document.getElementById('blink-element');
setInterval(() => {
element.classList.toggle('blink-off');
}, 500);使用 requestAnimationFrame 实现高性能闪烁
适合需要平滑动画或复杂闪烁模式的场景，避免定时器卡顿。
const element = document.getElementById('blink-element');
let startTime = null;
function blink(timestamp) {
if (!startTime) startTime = timestamp;
const elapsed = timestamp - startTime;
const progress = (elapsed % 1000) / 1000;
element.style.opacity = Math.abs(0.5 - progress) * 2;
requestAnimationFrame(blink);
}
requestAnimationFrame(blink);注意事项
- CSS 动画方案在移动端性能更好
- JavaScript 方案需注意清除定时器（
clearInterval） - 高频闪烁（>5Hz）可能引发癫痫，需谨慎使用
- 考虑添加
prefers-reduced-motion媒体查询为动效敏感用户提供替代方案
