新年烟花-蛇年-2025-新春烟花祝福_蛇年祝福HTML资源-CSDN文库

共1个文件

html：1个

html

需积分: 1 84 浏览量 2025-01-24 17:49:35 上传评论收藏 3KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

firework.zip （1个子文件）

firework

index.html 7KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>春节烟花</title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: #000; overflow: hidden; } canvas { display: block; } .greeting { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ff0000; font-family: "楷体", KaiTi, serif; text-shadow: 0 0 10px #ffff00; pointer-events: none; z-index: 100; opacity: 0; transition: opacity 1s; } @keyframes float { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } 100% { transform: translate(-50%, -50%) scale(1); } } </style> </head> <body> <canvas></canvas> <script> const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); // 设置画布尺寸 function setSize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } setSize(); window.addEventListener('resize', setSize); // 烟花粒子类 class Particle { constructor(x, y, color, type = 'normal') { this.x = x; this.y = y; this.color = color; this.type = type; this.radius = Math.random() * 3 + 1; const angle = Math.random() * Math.PI * 2; const velocity = type === 'trail' ? Math.random() * 2 + 4 : Math.random() * 8 + 4; this.dx = Math.cos(angle) * velocity; this.dy = Math.sin(angle) * velocity; this.alpha = 1; this.decay = Math.random() * 0.01 + 0.003; this.life = 100; this.sparkles = []; } update() { if (this.type === 'normal') { this.dx *= 0.99; this.dy *= 0.99; this.dy += 0.12; // 重力 } this.x += this.dx; this.y += this.dy; this.life--; this.alpha -= this.decay; // 创建火花效果 if (Math.random() < 0.1 && this.type === 'normal') { this.sparkles.push({ x: this.x, y: this.y, alpha: 1, radius: Math.random() * 2 }); } // 更新火花 for (let i = this.sparkles.length - 1; i >= 0; i--) { const sparkle = this.sparkles[i]; sparkle.alpha -= 0.02; if (sparkle.alpha <= 0) this.sparkles.splice(i, 1); } return this.alpha > 0 && this.life > 0; } draw() { // 绘制主粒子 ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = `rgba(${this.color}, ${this.alpha})`; ctx.fill(); // 绘制火花 this.sparkles.forEach(sparkle => { ctx.beginPath(); ctx.arc(sparkle.x, sparkle.y, sparkle.radius, 0, Math.PI * 2); ctx.fillStyle = `rgba(${this.color}, ${sparkle.alpha})`; ctx.fill(); }); } } // 烟花数组 const fireworks = []; const colors = [ '255, 50, 50', // 红色 '255, 215, 0', // 金色 '255, 182, 193', // 粉红 '50, 255, 50', // 绿色 '0, 191, 255', // 天蓝色 '255, 100, 0', // 橙色 '255, 0, 255' // 紫色 ]; // 创建烟花 function createFirework(x, y) { const color = colors[Math.floor(Math.random() * colors.length)]; const particles = []; const particleCount = 150; // 增加粒子数量 // 创建多层烟花效果 for(let i = 0; i < particleCount; i++) { particles.push(new Particle(x, y, color)); } // 添加尾迹效果 for(let i = 0; i < 20; i++) { particles.push(new Particle(x, y, color, 'trail')); } fireworks.push(particles); } // 创建文字动画 const greetings = [ "新春快乐", "恭喜发财", "万事如意", "蛇年大吉", "阖家幸福", "福星高照", "吉祥如意" ]; let currentGreeting = null; function showGreeting() { if (currentGreeting) { currentGreeting.remove(); } const greeting = document.createElement('div'); greeting.className = 'greeting'; greeting.style.fontSize = Math.random() * 30 + 40 + 'px'; // 随机大小 greeting.textContent = greetings[Math.floor(Math.random() * greetings.length)]; document.body.appendChild(greeting); // 添加动画 setTimeout(() => { greeting.style.opacity = '1'; greeting.style.animation = 'float 2s ease-in-out infinite'; }, 100); currentGreeting = greeting; // 3秒后淡出 setTimeout(() => { greeting.style.opacity = '0'; setTimeout(() => { showGreeting(); }, 1000); }, 3000); } // 动画循环 function animate() { // 创建半透明背景效果 ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 更新和绘制所有烟花 for(let i = fireworks.length - 1; i >= 0; i--) { const particles = fireworks[i]; for(let j = particles.length - 1; j >= 0; j--) { const particle = particles[j]; if(!particle.update()) { particles.splice(j, 1); } else { particle.draw(); } } if(particles.length === 0) { fireworks.splice(i, 1); } } // 随机创建新烟花 if(Math.random() < 0.05) { createFirework( Math.random() * canvas.width, Math.random() * canvas.height * 0.6 ); } requestAnimationFrame(animate); } // 点击创建烟花 canvas.addEventListener('click', (e) => { createFirework(e.clientX, e.clientY); }); // 开始动画和文字显示 animate(); showGreeting(); </script> </body> </html>

评论收藏

内容反馈