所以，我有一个基本的工作示例，我移动光标/鼠标，生成一个具有某些样式的 div，表示基于 clientX 的波浪状图案。

仅当我将 addEventlistener 添加到 window 时才有效： window.onmousemove= e => AnimationBubble(e.clientX);

不要问我这个函数是做什么的，或者请检查一下它是否有问题！让我告诉你，该函数没有问题/错误，它只是一个简单的函数，它接受鼠标 clientX pos 并生成具有某些类的 div，并在几秒钟后将其删除。

我发现在整个窗口中添加事件监听器是没有用的，而如果将 mousemove eventlistener 添加到父 div 中，我可以节省大量 CPU 使用率。指示仅当用户将鼠标悬停在 parent div/container 上时才生成 div。我正在考虑将其添加到页脚部分，以使其对用户更具交互性。

const wrapper = document.getElementById("bubble_wrapper");

const animationBubble = (x) => {
  const bubble = document.createElement("div");
  bubble.className = "bubble";
  bubble.style.left = `${x}px`;
  wrapper.appendChild(bubble);
  setTimeout(() => wrapper.removeChild(bubble), 2000)
}

// wrapper.addEventListener('mouseover', (e) => {
//     console.log("hi")
//     animationBubble(e.clientX);
// });

window.onmousemove = e => animationBubble(e.clientX);

#bubble_wrapper {
  height           : 50%;
  width            : 100%;
  background-color : black;
  position         : fixed;
  bottom           : 0;
  overflow         : hidden;
  pointer-events   : none;
  }
.bubble {
  height           : max(300px, 30vw);
  width            : max(300px, 30vw);
  background-color : rgb(33, 150, 243);
  border-radius    : 100%;
  position         : absolute;
  left             : 50%;
  top              : 100%;
  animation        : wave 2s ease-in-out infinite;
}
@keyframes wave {
  from, to { transform: translate(-50%,   0%); }
  50%      { transform: translate(-50%, -20%); }
  }

<div id="bubble_wrapper"></div>