目录
图片展示
完整代码
关键点解释
图片展示
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生日烟花特效</title><style>body {margin: 0;overflow: hidden;background: #000;color: white;font-family: 'Arial', sans-serif;display: flex;justify-content: center;align-items: center;flex-direction: column;}#fireworksCanvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.happy-birthday {position: relative;z-index: 10;font-size: 3rem;font-weight: bold;text-align: center;color: #fff;text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),0 0 30px rgba(255, 255, 0, 0.8),0 0 40px rgba(255, 0, 0, 0.8);animation: glow 2s infinite alternate;}@keyframes glow {from {text-shadow: 0 0 10px rgba(255, 255, 255, 0.6),0 0 20px rgba(255, 255, 0, 0.6),0 0 30px rgba(255, 0, 0, 0.6);}to {text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),0 0 40px rgba(255, 255, 0, 0.8),0 0 60px rgba(255, 0, 0, 0.8);}}</style>
</head>
<body><canvas id="fireworksCanvas"></canvas><div class="happy-birthday">🎉 生日快乐!🎉</div><script>// 初始化画布const canvas = document.getElementById('fireworksCanvas');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 烟花类class Firework {constructor(x, y, colors) {this.x = x;this.y = y;this.colors = colors;this.particles = [];this.createParticles();}createParticles() {for (let i = 0; i < 100; i++) {const angle = Math.random() * 2 * Math.PI;const speed = Math.random() * 4 + 2;const color = this.colors[Math.floor(Math.random() * this.colors.length)];this.particles.push({x: this.x,y: this.y,vx: Math.cos(angle) * speed,vy: Math.sin(angle) * speed,alpha: 1,color: color});}}update() {this.particles.forEach(p => {p.x += p.vx;p.y += p.vy;p.alpha -= 0.02;});this.particles = this.particles.filter(p => p.alpha > 0);}draw() {this.particles.forEach(p => {ctx.save();ctx.globalAlpha = p.alpha;ctx.fillStyle = p.color;ctx.beginPath();ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);ctx.fill();ctx.restore();});}isDone() {return this.particles.length === 0;}}// 声明 fireworks 为 letlet fireworks = [];const colors = ['#ff3d3d', '#ff9c3d', '#ffe03d', '#3dff83', '#3db9ff', '#9c3dff', '#ff3de8'];// 添加烟花function addFirework() {const x = Math.random() * canvas.width;const y = Math.random() * canvas.height / 2;fireworks.push(new Firework(x, y, colors));}// 主循环function loop() {ctx.clearRect(0, 0, canvas.width, canvas.height);if (Math.random() < 0.05) addFirework();fireworks.forEach(firework => {firework.update();firework.draw();});// 重新赋值,确保 fireworks 变量可变fireworks = fireworks.filter(firework => !firework.isDone());requestAnimationFrame(loop);}loop();// 窗口大小调整window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;});</script>
</body>
</html>
关键点解释
-
修复错误:
- 将
fireworks
声明改为let
,确保可以在循环中通过fireworks = fireworks.filter(...)
重新赋值。
- 将
-
烟花功能:
- 每个烟花是由
Firework
类生成的粒子组成,模拟了绚丽的散开效果。
- 每个烟花是由
-
生日主题:
- 中心的文字动画通过
@keyframes glow
实现,配合文字🎉 生日快乐!🎉
增加了节日氛围。
- 中心的文字动画通过
-
响应式设计:
- 监听
resize
事件,确保画布随窗口调整大小。
- 监听
嗨,我是命运之光。如果你觉得我的分享有价值,不妨通过以下方式表达你的支持:👍 点赞来表达你的喜爱,📁 关注以获取我的最新消息,💬 评论与我交流你的见解。我会继续努力,为你带来更多精彩和实用的内容。
点击这里👉 ,获取最新动态,⚡️ 让信息传递更加迅速。