<h1>点任意位置</h1>

.mpoint {
  position: absolute;
  padding: 0;
  margin: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: click 1s;
}

@keyframes click {
  0% {
    transform: scale(0, 0);
    background-color: #10ffff;
    opacity: 0;
  }

  30% {
    transform: scale(1, 1);
    opacity: 0.9;
  }

  100% {
    transform: scale(0, 0);
    background-color: #f0b051;
    opacity: 0;
  }
}
h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
body{
  overflow:hidden;
}

let cdiv = document.createElement("div");
//动画执行完后移除自身
cdiv.addEventListener("animationend", () => cdiv.remove());
window.addEventListener("click", (e) => {
  document.body.append(cdiv);
  cdiv.className = "mpoint";
  //定位圆圈的位置，为鼠标点坐标
  cdiv.style.left = e.clientX - cdiv.clientWidth / 2 + "px";
  cdiv.style.top = e.clientY - cdiv.clientHeight / 2 + "px";
});