为.blip类元素分配随机动画延迟并保留.delayedBlip的1.6s延迟

好的，我来帮你搞定这个雷达光点的动画延迟问题！要实现每个.blip拥有1-2秒的随机动画延迟，同时让它的同级.delayedBlip延迟比它晚1.6秒，我们可以用JavaScript动态计算并设置样式，这样既能保证两个元素的延迟关联性，又不会破坏.delayedBlip原有的动画设置。

实现思路 #

• 遍历页面上所有的.blip元素
• 为每个.blip生成1-2秒的随机动画延迟
• 找到对应同级的.delayedBlip，计算并设置它的延迟（.blip延迟 + 1.6秒）
• 保留.delayedBlip原有的动画属性（比如动画名称、时长等）

代码实现 #

JavaScript部分

// 获取页面中所有的.blip元素
const blipElements = document.querySelectorAll('.blip');

blipElements.forEach(blip => {
  // 生成1到2秒之间的随机延迟（Math.random()生成0-1的数，乘以1后加1得到1-2）
  const blipDelay = 1 + Math.random() * 1;
  // 给当前.blip设置动画延迟
  blip.style.animationDelay = `${blipDelay}s`;

  // 找到同级的.delayedBlip（这里假设它是.blip的下一个兄弟元素，可根据你的DOM结构调整）
  const delayedBlip = blip.nextElementSibling;
  if (delayedBlip && delayedBlip.classList.contains('delayedBlip')) {
    // 计算.delayedBlip的延迟：比对应.blip晚1.6秒
    const delayedBlipDelay = blipDelay + 1.6;
    // 设置延迟，不会覆盖原有动画属性
    delayedBlip.style.animationDelay = `${delayedBlipDelay}s`;
  }
});

基础CSS动画示例（供参考）

如果还没设置基础动画，可以用下面的代码作为参考，这个样式不会影响你原有的设置：

.blip, .delayedBlip {
  /* 定位和基础样式，根据你的地图布局调整 */
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00ff00;
  /* 基础动画设置，保留你原有的动画名称和时长即可 */
  animation: radarPulse 1.2s infinite ease-in-out;
}

@keyframes radarPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

注意事项 #

• 如果你的.delayedBlip不是.blip的直接下一个兄弟元素，可以调整选择方式，比如用blip.parentElement.querySelector('.delayedBlip')来查找父元素下的目标元素
• 这段JS代码需要在DOM加载完成后执行，可以放在DOMContentLoaded事件监听里，或者页面底部
• 代码只会修改animation-delay属性，.delayedBlip原有的其他CSS设置（比如动画名称、循环次数等）都会被保留

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