单Checkbox控制字母随机/顺序延迟发光动画实现需求

基础结构准备 #

先搭建HTML结构，每个字母单独放在带beautiful类的div中，配合控制用的Checkbox：

<input type="checkbox" id="glowTrigger">
<label for="glowTrigger">触发发光动画</label>
<div class="letters-container">
  <div class="beautiful">B</div>
  <div class="beautiful">E</div>
  <div class="beautiful">A</div>
  <div class="beautiful">U</div>
  <div class="beautiful">T</div>
  <div class="beautiful">I</div>
  <div class="beautiful">F</div>
  <div class="beautiful">U</div>
  <div class="beautiful">L</div>
</div>

编写基础样式与发光动画的CSS：

.letters-container {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  font-size: 48px;
  font-weight: bold;
}

.beautiful {
  position: relative;
  text-shadow: none;
  transition: text-shadow 0.3s ease;
}

/* 发光动画关键帧 */
@keyframes glow {
  0% {
    text-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color), 0 0 15px var(--glow-color);
  }
  50% {
    text-shadow: 0 0 10px var(--glow-color), 0 0 20px var(--glow-color), 0 0 30px var(--glow-color);
  }
  100% {
    text-shadow: 0 0 5px var(--glow-color), 0 0 10px var(--glow-color), 0 0 15px var(--glow-color);
  }
}

/* 激活发光的类 */
.glow-active {
  animation: glow 2s infinite;
}

功能1：随机触发发光动画 #

Checkbox选中时，给每个beautiful元素随机分配发光颜色与动画延迟，实现随机闪烁效果：

const glowTrigger = document.getElementById('glowTrigger');
const beautifulLetters = document.querySelectorAll('.beautiful');

// 生成随机RGB颜色
function getRandomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

glowTrigger.addEventListener('change', function() {
  if (this.checked) {
    beautifulLetters.forEach(letter => {
      const randomColor = getRandomColor();
      letter.style.setProperty('--glow-color', randomColor);
      // 0-2秒内随机延迟
      const randomDelay = Math.random() * 2 + 's';
      letter.style.animationDelay = randomDelay;
      letter.classList.add('glow-active');
    });
  } else {
    beautifulLetters.forEach(letter => {
      letter.classList.remove('glow-active');
      letter.style.removeProperty('--glow-color');
      letter.style.removeProperty('animationDelay');
    });
  }
});

功能2：依次延迟触发发光动画 #

按字母顺序依次触发发光，修改Checkbox的事件逻辑，给每个元素按索引设置递增延迟：

// 替换功能1的事件监听代码即可
const glowTrigger = document.getElementById('glowTrigger');
const beautifulLetters = document.querySelectorAll('.beautiful');

function getRandomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

glowTrigger.addEventListener('change', function() {
  if (this.checked) {
    beautifulLetters.forEach((letter, index) => {
      const randomColor = getRandomColor();
      letter.style.setProperty('--glow-color', randomColor);
      // 每个字母延迟300ms的倍数，顺序触发
      const sequentialDelay = index * 0.3 + 's';
      letter.style.animationDelay = sequentialDelay;
      letter.classList.add('glow-active');
    });
  } else {
    beautifulLetters.forEach(letter => {
      letter.classList.remove('glow-active');
      letter.style.removeProperty('--glow-color');
      letter.style.removeProperty('animationDelay');
    });
  }
});

自定义调整说明 #

• 可根据需求选择任一功能逻辑，或新增Checkbox分别绑定两种逻辑
• 动画时长、发光强度可修改CSS中@keyframes glow的text-shadow参数与动画时长
• 若需统一颜色发光，将getRandomColor()替换为固定颜色值即可，例如'#ff0000'

内容的提问来源于stack exchange，提问作者Artem Milaw