使用JS实现气泡跟随鼠标移动的动画效果,可以分为以下几个步骤:
首先,需要在HTML中创建一个容器元素,用于包含气泡,代码如下:
<div id="container"></div>
通过CSS对容器元素进行样式设置,如设置宽高、背景颜色和边框等,代码如下:
#container {
width: 100%;
height: 100%;
background-color: #293133;
border: 1px solid #ccc;
}
下面是使用纯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
属性移动到指定的位置。