鼠标跟随气泡动画

原创已于 2025-06-27 13:23:29 修改 · 293 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-09 13:56:58 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标跟随气泡动画</title>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg, #1a1a2e, #16213e);
font-family: 'Arial', sans-serif;
cursor: none;
}

.bubble {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
pointer-events: none;
transform: translate(-50%, -50%);
animation: float 4s infinite ease-in-out;
filter: blur(1px);
}

@keyframes float {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(1.2);
}
}

.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 10;
}

h1 {
font-size: 3rem;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

p {
font-size: 1.2rem;
margin-bottom: 30px;
}

a {
color: #00ffff;
text-decoration: none;
font-size: 1.5rem;
transition: all 0.3s;
}

a:hover {
text-shadow: 0 0 10px #00ffff;
}
</style>
</head>
<body>
<div class="content">
<h1>鼠标跟随气泡效果</h1>
<p>移动鼠标查看气泡跟随效果</p>

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const body = document.body;
const colors = ['rgba(255, 255, 255, 0.6)', 'rgba(173, 216, 230, 0.6)', 'rgba(144, 238, 144, 0.6)', 'rgba(255, 192, 203, 0.6)'];

// 创建初始气泡
for (let i = 0; i < 20; i++) {
createBubble(Math.random() * window.innerWidth, Math.random() * window.innerHeight);
}

// 鼠标移动时创建气泡
document.addEventListener('mousemove', function(e) {
createBubble(e.clientX, e.clientY);
});

// 自动创建气泡
setInterval(function() {
createBubble(
Math.random() * window.innerWidth,
Math.random() * window.innerHeight
);
}, 300);

function createBubble(x, y) {
const bubble = document.createElement('div');
bubble.classList.add('bubble');

const size = Math.random() * 30 + 10;
const color = colors[Math.floor(Math.random() * colors.length)];

bubble.style.width = `${size}px`;
bubble.style.height = `${size}px`;
bubble.style.left = `${x}px`;
bubble.style.top = `${y}px`;
bubble.style.background = color;
bubble.style.animationDuration = `${Math.random() * 3 + 2}s`;

body.appendChild(bubble);

// 移除气泡以优化性能
setTimeout(() => {
bubble.remove();
}, 4000);
}
});
</script>
</body>
</html>