Bubble Back
为你的网页添加轻盈飘动的气泡背景效果 —— 简洁、优雅、无需依赖。
Bubble Back 是一个使用原生 HTML、CSS 和 JavaScript 实现的动态气泡背景动画，适合用于登录页、引导页或创意展示场景。
<canvas id="bubble-back"></canvas>
<script>
const canvas = document.getElementById('bubble-back');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const bubbles = [];
const bubbleCount = 50;
class Bubble {
constructor() {
this.x = Math.random() * canvas.width;
this.y = canvas.height + Math.random() * 100;
this.radius = Math.random() * 20 + 5;
this.speed = Math.random() * 2 + 0.5;
this.alpha = Math.random() * 0.5 + 0.1;
}
update() {
this.y -= this.speed;
if (this.y + this.radius < 0) {
this.y = canvas.height + this.radius;
this.x = Math.random() * canvas.width;
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
ctx.fill();
}
}
for (let i = 0; i < bubbleCount; i++) {
bubbles.push(new Bubble());
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
bubbles.forEach(bubble => {
bubble.update();
bubble.draw();
});
requestAnimationFrame(animate);
}
animate();
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
只需将上述代码嵌入你的 HTML 页面，即可获得梦幻般的气泡上升动画背景！