当前位置：首页 > JavaScript

js实现闪烁

2026-01-30 09:17:42JavaScript

使用CSS动画实现闪烁效果

通过CSS的@keyframes规则定义闪烁动画，再利用JavaScript动态添加/移除类名触发效果：

.blink {
  animation: blink 1s infinite;
}

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

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

// 停止闪烁
// element.classList.remove('blink');

使用setInterval定时切换样式

通过JavaScript定时器周期性修改元素的透明度或显示状态：

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

// 停止闪烁
// clearInterval(interval);

使用requestAnimationFrame实现高性能闪烁

适合需要平滑动画效果的场景：

const element = document.getElementById('target');
let start = null;
function blink(timestamp) {
  if (!start) start = timestamp;
  const progress = (timestamp - start) % 1000;
  element.style.opacity = Math.abs(500 - progress) / 500;
  requestAnimationFrame(blink);
}
requestAnimationFrame(blink);

快速颜色闪烁实现

通过交替改变背景色实现醒目闪烁效果：

const element = document.getElementById('target');
let isRed = false;
setInterval(() => {
  isRed = !isRed;
  element.style.backgroundColor = isRed ? 'red' : 'transparent';
}, 300);

带缓动效果的闪烁

使用CSS过渡属性实现平滑的闪烁效果：

.smooth-blink {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.smooth-blink.hidden {
  opacity: 0;
}

const element = document.getElementById('target');
element.classList.add('smooth-blink');
setInterval(() => {
  element.classList.toggle('hidden');
}, 1000);

渐强渐弱闪烁模式

实现更自然的呼吸灯效果：

const element = document.getElementById('target');
let opacity = 1;
let direction = -0.05;
function breathe() {
  opacity += direction;
  if (opacity <= 0.3 || opacity >= 1) direction *= -1;
  element.style.opacity = opacity;
  requestAnimationFrame(breathe);
}
breathe();

随机间隔闪烁

创建更自然的警示效果：

const element = document.getElementById('target');
function randomBlink() {
  element.style.visibility = 
    element.style.visibility === 'hidden' ? 'visible' : 'hidden';
  setTimeout(randomBlink, 200 + Math.random() * 800);
}
randomBlink();

js实现闪烁