点击事件--水波纹动画

html

<div id="app"></div>

css

.back_span {
  position: absolute;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 254, 254);
  border-radius: 50%;
  animation: big 1s;
}
@keyframes big {
  0% {
     0px;
    height: 0px;
    opacity: 1;
  }
  100% {
     100px;
    height: 100px;
    opacity: 0;
  }
}

js

    绑定父级标签
    let app = document.querySelector("#app");
    监听点击事件
    document.addEventListener("click", function listenClick(e) {
      let x = e.clientX;
      let y = e.clientY;
      创建样式节点
      let circle = document.createElement("span");
      circle.className = "back_span"; // 防止样式冲突，使用指定类名
      circle.style.left = x + "px";
      circle.style.top = y + "px";
      app.appendChild(circle); 
      setInterval(function () {
        circle.remove();
      }, 1000);
    });