仅当为彼此重叠的多个div单击按钮时才开始css动画

<div class="overlap-button"></div>
<div class="overlap-button"></div>
<div class="overlap-button"></div>

.overlap-button {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
}

.overlap-button.animate {
  animation: myAnimation 1s infinite;
}

@keyframes myAnimation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

const buttons = document.querySelectorAll('.overlap-button');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const clickedButtons = Array.from(buttons).filter(btn => btn.classList.contains('clicked'));
    
    if (clickedButtons.length > 1 && checkOverlap(clickedButtons)) {
      clickedButtons.forEach(btn => btn.classList.add('animate'));
    } else {
      buttons.forEach(btn => btn.classList.remove('animate'));
    }
    
    button.classList.toggle('clicked');
  });
});

function checkOverlap(buttons) {
  for (let i = 0; i < buttons.length - 1; i++) {
    const rect1 = buttons[i].getBoundingClientRect();
    
    for (let j = i + 1; j < buttons.length; j++) {
      const rect2 = buttons[j].getBoundingClientRect();
      
      if (!(rect1.right < rect2.left || 
            rect1.left > rect2.right || 
            rect1.bottom < rect2.top || 
            rect1.top > rect2.bottom)) {
        return true;
      }
    }
  }
  
  return false;
}