跟随教程制作Wave动画失败，寻求技术帮助（附HTML/CSS/JS代码）

安全阿岳

2026-8-13

鼠标触发波浪动画无反应问题排查与修复

我按照教程操作实现鼠标移动触发波浪动画，但页面无任何反应，相关代码如下：

HTML代码

<div id="wrapper"></div>

CSS代码

body {
  background-color: black;
}

#wrapper {
  height: 100%;
  width:100%;
  position: fixed;
  bottom: 0px;
  overflow: hidden;
  pointer-events: none;
}

.liquid {
  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%);
  }
}

JavaScript代码

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

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

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

问题原因

JavaScript代码存在变量名不一致的错误：创建的元素变量是bubble，但后续添加、移除元素时误用了未定义的liquid，导致代码执行报错，动画无法触发。

修复后的JavaScript代码

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

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

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