js 实现闪烁

JavaScript 实现元素闪烁效果

通过修改元素的 visibility 或 opacity 属性，结合 setInterval 实现周期性闪烁效果。

基础实现方案：

const element = document.getElementById('target');
let isVisible = true;

setInterval(() => {
  isVisible = !isVisible;
  element.style.visibility = isVisible ? 'visible' : 'hidden';
}, 500);

优化方案（CSS 过渡）：

const element = document.getElementById('target');
element.style.transition = 'opacity 0.3s ease';

setInterval(() => {
  element.style.opacity = element.style.opacity === '0' ? '1' : '0';
}, 1000);

高级实现（类名切换）：

.blink {
  animation: blink-animation 1s infinite;
}

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

document.getElementById('target').classList.add('blink');

停止闪烁的方法

// 清除定时器方案
const blinkInterval = setInterval(blinkFunc, 500);

function stopBlinking() {
  clearInterval(blinkInterval);
  element.style.visibility = 'visible';
}

// CSS 动画方案
document.getElementById('target').classList.remove('blink');

注意事项

1. 性能考虑：CSS 动画通常比 JavaScript 定时器性能更好
2. 浏览器兼容性：现代浏览器都支持上述方法
3. 闪烁频率：通过调整时间间隔参数控制闪烁速度
4. 移动端适配：确保闪烁效果在不同设备上表现一致