使用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属性移动到指定的位置。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！