js实现闪烁效果

使用 CSS 动画实现闪烁

通过 @keyframes 定义动画，结合 opacity 或 background-color 属性实现闪烁效果：

.blink {
  animation: blink 1s infinite;
}

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

JavaScript 动态添加类名：

const element = document.getElementById('target');
element.classList.add('blink');

使用 setInterval 定时切换样式

通过定时修改元素的 visibility 或 display 属性实现闪烁：

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

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

使用 requestAnimationFrame 高性能动画

通过递归调用 requestAnimationFrame 实现平滑闪烁：

const element = document.getElementById('target');
let startTime = null;

function blink(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;
  const progress = (elapsed % 1000) / 1000;

  element.style.opacity = Math.abs(progress - 0.5) * 2;
  requestAnimationFrame(blink);
}

requestAnimationFrame(blink);

颜色闪烁效果

修改元素的背景色或文字颜色实现彩色闪烁：

const element = document.getElementById('target');
const colors = ['red', 'blue', 'green', 'yellow'];
let index = 0;

setInterval(() => {
  element.style.color = colors[index];
  index = (index + 1) % colors.length;
}, 300);

结合 CSS 变量动态控制

通过 JavaScript 修改 CSS 变量实现灵活控制：

:root {
  --blink-opacity: 1;
}

.blink-var {
  opacity: var(--blink-opacity);
}

JavaScript 控制：

document.documentElement.style.setProperty('--blink-opacity', '0');

以上方法可根据需求选择，CSS 动画性能最优，setInterval 兼容性最好，requestAnimationFrame 适合复杂动画场景。