如何通过CSS Animation检测两个容器碰撞并触发警报？

由于CSS本身没有原生的碰撞检测能力，也无法直接触发警报这类交互逻辑，所以我们需要以CSS Animation负责容器的位置动效，搭配少量JS完成碰撞检测和警报触发，这是最贴近需求的实现方案：

实现步骤与代码示例 #

1. 基础HTML结构 #

创建两个需要检测碰撞的容器：

<div class="box box1"></div>
<div class="box box2"></div>

2. CSS Animation定义容器移动 #

用@keyframes定义两个容器的移动轨迹，让它们产生可能碰撞的运动：

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 4px;
}

/* 水平移动的容器 */
.box1 {
  background-color: #ff4444;
  animation: moveHorizontal 4s linear infinite;
}

/* 垂直移动的容器 */
.box2 {
  background-color: #33b5e5;
  animation: moveVertical 3s linear infinite;
}

@keyframes moveHorizontal {
  0% { 
    left: 0; 
    top: 100px; 
  }
  100% { 
    left: calc(100vw - 100px); 
    top: 100px; 
  }
}

@keyframes moveVertical {
  0% { 
    top: 0; 
    left: 200px; 
  }
  100% { 
    top: calc(100vh - 100px); 
    left: 200px; 
  }
}

3. JS实现碰撞检测与警报触发 #

利用getBoundingClientRect()获取容器的实时位置边界，通过矩形相交逻辑判断碰撞，并触发警报：

const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');
let isCollisionActive = false;

// 碰撞检测核心函数
function checkCollision() {
  const rect1 = box1.getBoundingClientRect();
  const rect2 = box2.getBoundingClientRect();

  // 判断两个矩形是否相交（碰撞）
  const hasCollision = !(
    rect1.top > rect2.bottom ||
    rect1.bottom < rect2.top ||
    rect1.left > rect2.right ||
    rect1.right < rect2.left
  );

  // 仅在碰撞状态从无到有时触发一次警报
  if (hasCollision && !isCollisionActive) {
    alert('碰撞警报！两个容器发生碰撞');
    isCollisionActive = true;
    // 可选：碰撞后暂停动画
    // box1.style.animationPlayState = 'paused';
    // box2.style.animationPlayState = 'paused';
  } 
  // 碰撞结束后重置状态，允许下次触发
  else if (!hasCollision && isCollisionActive) {
    isCollisionActive = false;
  }

  // 持续检测动画帧
  requestAnimationFrame(checkCollision);
}

// 启动检测循环
checkCollision();

核心逻辑说明 #

• CSS Animation负责完全控制容器的运动轨迹、速度和循环规则，是动效的核心驱动。
• JS仅做最必要的工作：通过getBoundingClientRect()获取容器实时位置，用矩形相交逻辑判断碰撞，避免重复触发警报，并调用alert()触发提示。
• 标志位isCollisionActive用于防止碰撞过程中反复弹出警报，仅在碰撞状态切换时触发一次。

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