js实现闪烁

实现元素闪烁效果

使用CSS动画结合JavaScript控制元素的闪烁效果。定义一个关键帧动画，通过JavaScript动态添加或移除动画类。

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

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

// 停止闪烁
function stopBlinking() {
  element.classList.remove('blink');
}

使用setInterval实现

通过定时器交替改变元素的可见性来实现闪烁效果。这种方法兼容性更好但性能略低于CSS动画。

const element = document.getElementById('target');
let isVisible = true;
const interval = setInterval(() => {
  isVisible = !isVisible;
  element.style.visibility = isVisible ? 'visible' : 'hidden';
}, 500);

// 停止闪烁
clearInterval(interval);

使用requestAnimationFrame

对于需要更精细控制的动画效果，可以使用requestAnimationFrame API。这种方法性能最佳，适合复杂的动画场景。

const element = document.getElementById('target');
let start = null;
let opacity = 1;

function blink(timestamp) {
  if (!start) start = timestamp;
  const progress = (timestamp - start) % 1000;
  opacity = Math.abs(Math.cos(progress * Math.PI / 500));
  element.style.opacity = opacity;
  requestAnimationFrame(blink);
}

requestAnimationFrame(blink);

使用CSS transition

通过JavaScript动态改变样式属性，结合CSS过渡效果实现平滑的闪烁。

.fade {
  transition: opacity 0.5s ease-in-out;
}

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

function toggleBlink() {
  const currentOpacity = parseFloat(getComputedStyle(element).opacity);
  element.style.opacity = currentOpacity === 1 ? 0 : 1;
}

const interval = setInterval(toggleBlink, 1000);

注意事项

不同方法各有优缺点：CSS动画性能最好但控制不够灵活；setInterval简单但可能引起性能问题；requestAnimationFrame最流畅但实现较复杂。根据具体需求选择合适方案。

闪烁频率可以通过调整动画时间或间隔时间来改变。避免过度使用闪烁效果，以免影响用户体验。