动态气泡背景
<!DOCTYPE html><html>
<head>
<title>Bubble Background</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background: #222;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
h1 {
color: white;
font-size: 4rem;
z-index: 1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<h1>Hello Boy!</h1>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Bubble {
constructor(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.dx = Math.random() - 0.5;
this.dy = Math.random() - 0.5;
this.speed = Math.random() * 5 + 1;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}
update() {
if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
this.dx = -this.dx;
}
if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
this.dy = -this.dy;
}
this.x += this.dx * this.speed;
this.y += this.dy * this.speed;
}
}
const bubbles = [];
function init() {
for (let i = 0; i < 50; i++) {
const radius = Math.random() * 50 + 10;
const x = Math.random() * (canvas.width - radius * 2) + radius;
const y = Math.random() * (canvas.height - radius * 2) + radius;
const color = `hsla(${Math.random() * 360}, 100%, 50%, 0.8)`;
bubbles.push(new Bubble(x, y, radius, color));
}
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
bubbles.forEach((bubble) => {
bubble.draw();
bubble.update();
});
}
init();
animate();
</script>
</body>
</html>
页:
[1]