JS实现闪动

使用CSS动画实现闪动效果

通过CSS的@keyframes规则定义动画，结合opacity属性控制元素的透明度变化，实现闪动效果。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');

使用JavaScript定时器实现闪动

通过setInterval周期性切换元素的显示/隐藏状态，实现更灵活的闪动控制。可自定义闪动速度和次数。

function blink(element, duration = 500, times = Infinity) {
  let count = 0;
  const interval = setInterval(() => {
    element.style.visibility = 
      element.style.visibility === 'hidden' ? 'visible' : 'hidden';
    if (++count >= times * 2) clearInterval(interval);
  }, duration);
}

blink(document.getElementById('target'), 300, 5);

使用requestAnimationFrame实现高性能闪动

适合需要平滑动画效果的场景，通过浏览器原生动画API实现性能优化的闪动效果。

function smoothBlink(element, duration = 1000) {
  let start = null;
  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = (timestamp - start) % duration;
    element.style.opacity = Math.abs(0.5 - progress / duration) * 2;
    requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

smoothBlink(document.getElementById('target'));

结合CSS变量实现可控闪动

通过JavaScript动态修改CSS变量值，实现可实时调整的闪动效果。

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

function variableBlink(element, speed = 1) {
  let direction = -0.05;
  function update() {
    const current = parseFloat(
      getComputedStyle(element).getPropertyValue('--blink-opacity')
    );
    const newValue = current + direction * speed;
    if (newValue <= 0 || newValue >= 1) direction *= -1;
    element.style.setProperty('--blink-opacity', newValue);
    requestAnimationFrame(update);
  }
  update();
}

variableBlink(document.querySelector('.element'));

使用Web Animations API实现

现代浏览器支持的Web Animations API提供更强大的动画控制能力。

function webApiBlink(element) {
  element.animate([
    { opacity: 1 },
    { opacity: 0 },
    { opacity: 1 }
  ], {
    duration: 1000,
    iterations: Infinity
  });
}

webApiBlink(document.getElementById('anim-element'));