使用JS实现气泡跟随鼠标移动的动画效果

使用JS实现气泡跟随鼠标移动的动画效果，可以分为以下几个步骤：

步骤1：HTML结构

首先，需要在HTML中创建一个容器元素，用于包含气泡，代码如下：

<div id="container"></div>

步骤2：CSS样式

通过CSS对容器元素进行样式设置，如设置宽高、背景颜色和边框等，代码如下：

#container {
  width: 100%;
  height: 100%;
  background-color: #293133;
  border: 1px solid #ccc;
}

步骤3：JS实现

下面是使用纯JS实现气泡跟随鼠标移动的动画效果的完整代码：

// 容器元素
var container = document.getElementById('container')

// 创建气泡元素
var bubble = document.createElement('div')
bubble.className = 'bubble'

// 将气泡添加到容器中
container.appendChild(bubble)

// 监听鼠标移动事件
container.addEventListener('mousemove', function(e) {
  // 获取鼠标位置
  var mouseX = e.clientX
  var mouseY = e.clientY

  // 计算气泡位置
  var bubbleX = mouseX + 10
  var bubbleY = mouseY + 10

  // 设置气泡位置
  bubble.style.left = bubbleX + 'px';
  bubble.style.top = bubbleY + 'px';
})

在上述代码中，我们首先获取容器元素，并创建气泡元素，将其添加到容器中。然后，监听容器的鼠标移动事件，获取鼠标的位置，计算气泡的位置，最后将气泡的位置设置为计算出的值。其中，气泡的位置通过设置style.left和style.top的值来进行定位。

另外，我们也可以使用CSS的transform属性来实现气泡的动画效果，如下所示：

.bubble {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: -100px;
  left: -100px;
  transition: transform 0.3s ease-in-out;
}

.container:hover .bubble {
  transform: translate(10px, 10px);
}

在上述代码中，我们先通过CSS设置气泡的样式，其中transition属性设置了气泡的过渡效果。然后，通过container:hover .bubble选择器，当鼠标移动到容器元素时，将气泡使用transform属性移动到指定的位置。