2025跨年烟花代码html
时间: 2024-12-31 22:29:59 浏览: 11
### 创建2025跨年烟花效果的HTML代码
为了实现2025新年烟花的效果,可以利用HTML5 Canvas结合JavaScript来绘制动态图形。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2025 New Year Fireworks</title>
<style>
body { margin: 0; overflow: hidden; background-color: black;}
canvas { display: block; }
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<script>
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
this.size = Math.random() * 4 + 1;
this.speedX = (Math.random() - 0.5) * 10;
this.speedY = (Math.random() - 0.5) * 10;
this.gravity = 0.1;
this.friction = 0.97;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
this.speedY += this.gravity;
this.speedX *= this.friction;
this.speedY *= this.friction;
this.draw();
}
draw() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
}
}
function animateParticles(particles) {
particles.forEach((particle, index) => {
particle.update();
if (particle.size <= 0 || particle.y >= canvas.height) {
particles.splice(index, 1);
} else {
particle.size -= 0.05;
}
});
}
function createExplosion(x, y) {
const particlesCount = 100;
const particles = [];
for (let i = 0; i < particlesCount; i++) {
particles.push(new Particle(x, y));
}
function animationLoop() {
requestAnimationFrame(animationLoop);
ctx.clearRect(0, 0, canvas.width, canvas.height);
animateParticles(particles);
if (particles.length === 0) cancelAnimationFrame(loopId);
}
let loopId = requestAnimationFrame(animationLoop);
}
window.addEventListener('click', event => {
createExplosion(event.clientX, event.clientY);
});
// Automatically trigger explosions at random intervals to simulate fireworks show.
setInterval(() => {
const centerX = Math.random() * canvas.width;
const centerY = Math.random() * canvas.height / 2 + canvas.height / 4;
createExplosion(centerX, centerY);
}, 1500);
</script>
</body>
</html>
```
这段代码定义了一个基于鼠标的交互式烟花爆炸动画[^1]。
阅读全文