1. 前言
在前端开发中，经常会用到动画效果来提升用户交互体验。CSS3的出现为开发者提供了更多实现动画效果的方式，其中之一就是通过CSS3动画来实现。本文将讲解如何使用CSS3动画实现一个超酷炫的粘性气泡效果。
2. 效果预览
在介绍具体实现之前，我们先来看一下最终的效果。
鼠标悬停在指定区域时，会弹出一个气泡，气泡可以跟随鼠标移动并保持在页面可视范围内。气泡可以被拖动到页面中的任何位置，并且当气泡被拖动到屏幕边缘时，它会自动停靠在边缘处。
3. 实现步骤
3.1 HTML结构
首先我们需要创建一个HTML结构来容纳气泡和其它相关内容。这里我们以一个简单的<div>元素作为容器，并在其中添加一个气泡，如下所示：
<div class="bubble-container">
<div class="bubble"></div>
<div class="content">
// 内容区域
</div>
</div>
其中.bubble-container为气泡的容器元素，.bubble为气泡元素，.content为容器内的内容区域。
3.2 样式设置
接下来我们需要为各元素设置样式，其中气泡的样式是实现效果的关键。
3.2.1 容器样式
我们先来为容器元素设置样式，代码如下：
.bubble-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
background-color: #fff;
transition: all .3s ease;
}
这段代码设置了容器元素的基本样式，包括定位、大小、形状、边框、阴影、背景色等等。
其中最关键的一行是：
overflow: hidden;它可以隐藏容器元素内的气泡，当气泡被弹出时才会被显示出来。同时，为了使气泡在被弹出的时候不会超出容器元素的边界，我们需要将容器元素的overflow属性设置为hidden。
3.2.2 气泡样式
接下来我们需要为气泡元素设置样式，代码如下：
.bubble {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 0;
width: 0;
border-radius: 50%;
background-color: #f00;
box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
cursor: move;
transition: all .3s ease;
}
这段代码设置了气泡元素的基本样式，包括定位、大小、形状、边框、背景色、阴影等等。
其中最关键的一行是：
border-radius: 50%;它定义了气泡元素呈圆形，并与容器元素的边界相切。
3.3 JS操作
我们还需使用JavaScript监听用户的鼠标事件，并对气泡元素进行操作，从而实现气泡的弹出、拖动和自动停靠等功能。
3.3.1 弹出气泡
当鼠标悬停在容器元素上方时，我们需要将气泡元素弹出，代码如下：
const bubble = document.querySelector('.bubble');
const container = document.querySelector('.bubble-container');
container.addEventListener('mouseenter', () => {
bubble.style.height = "200px";
bubble.style.width = "200px";
});
这段代码监听了容器元素的mouseenter事件，当事件发生时，将气泡元素的height和width样式修改为200px，从而将气泡元素弹出来。
3.3.2 拖动气泡
当气泡元素被弹出后，我们需要监听鼠标事件对气泡元素进行拖动操作，代码如下：
const handleDrag = (event) => {
const mouseX = event.clientX;
const mouseY = event.clientY;
bubble.style.transform = `translate(${mouseX - startPosX}px, ${mouseY - startPosY}px)`;
};
bubble.addEventListener('mousedown', (event) => {
startPosX = event.offsetX;
startPosY = event.offsetY;
bubble.style.cursor = 'grabbing';
document.addEventListener('mousemove', handleDrag);
});
document.addEventListener('mouseup', () => {
bubble.style.cursor = 'grab';
document.removeEventListener('mousemove', handleDrag);
});
这段代码处理了气泡元素的mousedown、mousemove和mouseup事件，其中mousedown事件用于记录鼠标起始位置和修改气泡的cursor样式，mousemove事件用于根据鼠标位置计算气泡的偏移量并更新气泡位置，mouseup事件用于还原气泡的cursor样式和弹出事件的监听。
3.3.3 自动停靠
当气泡元素被拖动到容器元素的边缘时，我们需要自动将气泡元素停靠在边缘处，代码如下：
document.addEventListener('mousemove', (event) => {
const x = event.clientX - container.getBoundingClientRect().left;
const y = event.clientY - container.getBoundingClientRect().top;
const distanceX = Math.min(Math.abs(x - container.clientWidth / 2), container.clientWidth / 2);
const distanceY = Math.min(Math.abs(y - container.clientHeight / 2), container.clientHeight / 2);
const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
const outerCircleRadius = container.clientWidth / 2;
const innerCircleRadius = outerCircleRadius - bubble.clientWidth / 2;
if (distance <= innerCircleRadius) {
bubble.style.transform = `translate(${container.clientWidth / 2 - startPosX}px, ${container.clientHeight / 2 - startPosY}px)`;
}
else if (distance <= outerCircleRadius) {
const angle = Math.atan2(y - container.clientHeight / 2, x - container.clientWidth / 2);
const posX = Math.cos(angle) * (outerCircleRadius - bubble.clientWidth / 2);
const posY = Math.sin(angle) * (outerCircleRadius - bubble.clientWidth / 2);
bubble.style.transform = `translate(${posX + container.clientWidth / 2 - startPosX}px, ${posY + container.clientHeight / 2 - startPosY}px)`;
}
});
这段代码监听了整个文档的mousemove事件，用于检测气泡是否需要停靠到容器元素的边缘。我们通过计算鼠标距离容器元素中心点的距离，然后根据距离大小将气泡停靠在内圆上或外圆上。
4. 总结
通过上述步骤，我们实现了一个超酷炫的粘性气泡效果，包括气泡的弹出、拖动和自动停靠等功能。这是一个较为实用的效果，可以在页面中被广泛应用。
希望本文对你有所帮助，感谢阅读！