如何用CSS实现点击地鼠（whack-a-mole）时的辐射圆形动画效果

核心思路 #

要实现从地鼠中心向外扩散的辐射动画，不能直接给.wgs__mole-head绑定动画（它是地鼠头部容器，范围受限），得单独创建一个动画元素，定位在地鼠头部中心，通过CSS的scale和opacity属性实现扩散淡出效果。

具体实现步骤 #

1. 动态创建动画元素（JS实现） #

点击地鼠时生成独立的辐射效果div，确保动画不受父容器布局限制：

document.querySelectorAll('.wgs__mole-head').forEach(mole => {
  mole.addEventListener('click', function(e) {
    // 创建辐射元素
    const ripple = document.createElement('div');
    ripple.classList.add('mole-ripple');
    // 计算地鼠头部中心位置
    const rect = this.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    // 定位到中心（初始宽高50px，所以偏移25px）
    ripple.style.left = `${centerX - 25}px`;
    ripple.style.top = `${centerY - 25}px`;
    // 添加到页面
    document.body.appendChild(ripple);
    // 动画结束后自动移除元素
    ripple.addEventListener('animationend', () => ripple.remove());
  });
});

2. 添加CSS动画样式 #

定义扩散淡出的关键帧动画：

.mole-ripple {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #ff6b6b;
  pointer-events: none; /* 不干扰后续点击操作 */
  animation: mole-ripple 0.6s ease-out forwards;
}

@keyframes mole-ripple {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}

3. 纯CSS替代方案（无需动态创建元素） #

如果想避免动态DOM操作，可给地鼠父容器预设隐藏的动画元素，点击时触发动画类：

<!-- 修改地鼠容器结构 -->
<div class="wgs__mole">
  <div class="wgs__mole-head"></div>
  <div class="mole-ripple-static"></div>
</div>

.wgs__mole {
  position: relative;
}

.mole-ripple-static {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #ff6b6b;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}

.mole-ripple-static.active {
  animation: mole-ripple 0.6s ease-out forwards;
}

document.querySelectorAll('.wgs__mole-head').forEach(mole => {
  mole.addEventListener('click', function() {
    const ripple = this.nextElementSibling;
    ripple.classList.add('active');
    // 动画结束后移除类，以便下次点击重新触发
    setTimeout(() => ripple.classList.remove('active'), 600);
  });
});

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