如何实现点击指定区域时从光标处触发JS圆形扩散动画

问题核心在于两点：父容器未设置相对定位导致动画元素定位参考错误；使用硬编码偏移值而非动态计算容器位置。以下是修正后的完整实现：

1. 修正CSS（添加父容器定位） #

给#blankBox添加相对定位，确保内部绝对定位的动画元素以它为参考基准：

.testArea#blankBox {
  position: relative;
  /* 保留你原有.testArea的其他样式，比如宽高、背景色等 */
}

/* CSS for the click circle animation */
.click-circle {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: #8a26fc;
  border-radius: 50%;
  pointer-events: none;
  /* 新增：让圆心对齐点击位置 */
  margin-left: -75px;
  margin-top: -75px;
}

.click-animation {
  animation: click-effect 0.33s ease-out forwards;
}

@keyframes click-effect {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

2. 修正JS（动态计算点击位置） #

移除硬编码的625和335，通过容器的getBoundingClientRect()动态计算相对偏移：

function handleBlankBoxClick(event) {
  if (testDuration <= 0) {
    return;
  }

  if (!countdownStarted && testDuration > 0) {
    countdownStarted = true;
    startCountdown();
  }

  if (testDuration > 0) {
    clickText.style.display = "none";

    var circle = document.createElement("div");
    circle.classList.add("click-circle");
    blankBox.appendChild(circle);

    // 动态获取容器在页面中的位置信息
    var rect = blankBox.getBoundingClientRect();
    // 计算点击位置相对于容器内部的坐标
    var offsetX = event.clientX - rect.left;
    var offsetY = event.clientY - rect.top;
    
    // 设置动画元素的初始位置
    circle.style.left = offsetX + "px";
    circle.style.top = offsetY + "px";

    circle.classList.add("click-animation");

    setTimeout(function () {
      blankBox.removeChild(circle);
    }, 500);
  }
}

关键修改说明 #

• 父容器定位：#blankBox设置position: relative后，内部的.click-circle会以容器左上角为定位原点，而非整个页面，确保不同分辨率下定位基准正确。
• 动态偏移计算：用event.clientX - rect.left和event.clientY - rect.top得到点击点在容器内的相对坐标，彻底摆脱固定数值的限制。
• 圆心对齐：添加负边距让动画元素的圆心正好落在点击位置，避免从左上角扩散的视觉错位问题。

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