效果展示
源代码
html"><!DOCTYPE html>
<html lang="en">
<script>javascript">var _hmt = _hmt || [];(function () {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?45f95f1bfde85c7777c3d1157e8c2d34";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
</script>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>炸弹爆炸和烟花效果</title><style>body, html {margin: 0;padding: 0;overflow: hidden;background: #000;}.starry-background {position: absolute;width: 100%;height: 100%;background: radial-gradient(circle at bottom, #001025, #000000);z-index: -1;}.stars {position: absolute;width: 100%;height: 100%;background: url('https://i.imgur.com/3Zv2v1m.png') repeat;opacity: 0.5;animation: twinkle 5s infinite alternate;}@keyframes twinkle {from {opacity: 0.3;}to {opacity: 0.7;}}.lantern {position: absolute;width: 30px;height: 45px;background: radial-gradient(circle, #ff8c00, #ff4500);border-radius: 10px;box-shadow: 0 0 10px rgba(255, 140, 0, 0.8);animation: floatUp infinite linear;}@keyframes floatUp {0% {transform: translateY(100vh); opacity: 0;}10% {opacity: 1;}100% {transform: translateY(-200%); opacity: 0;}}.new-year-text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-family: 'Arial', sans-serif;font-size: 100px; font-weight: bold;color: #ff8c00;text-shadow: 2px 2px 10px rgba(255, 140, 0, 0.8);opacity: 0; transition: opacity 3s ease-out; }</style>
</head>
<body><div class="starry-background"><div class="stars"></div></div><div class="new-year-text">2025 新春快乐！</div><div class="lantern-container"></div><canvas id="fireworks"></canvas><script>javascript">const lanternContainer = document.querySelector('.lantern-container');let lanternCount = 0;function generateLantern() {const lantern = document.createElement('div');lantern.classList.add('lantern');lantern.style.left = Math.random() * 100 + '%';lantern.style.animationDuration = `${10 + Math.random() * 5}s`;lanternContainer.appendChild(lantern);lanternCount++;if (lanternCount >= 50) clearInterval(lanternInterval); }const lanternInterval = setInterval(generateLantern, 200); const canvas = document.getElementById('fireworks');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;let particles = [];function createFirework(x, y) {const particleCount = 150;for (let i = 0; i < particleCount; i++) {particles.push(new Particle(x, y));}}class Particle {constructor(x, y) {this.x = x;this.y = y;this.size = Math.random() * 3 + 1;this.speedX = Math.random() * 6 - 3;this.speedY = Math.random() * 6 - 3;this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;this.alpha = 1;}update() {this.x += this.speedX;this.y += this.speedY;this.alpha -= 0.01;}draw() {ctx.globalAlpha = this.alpha;ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fill();}}function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);particles = particles.filter(particle => particle.alpha > 0);particles.forEach(particle => {particle.update();particle.draw();});requestAnimationFrame(animate);}function autoFireworks() {setInterval(() => {const x = Math.random() * canvas.width;const y = Math.random() * canvas.height / 2;createFirework(x, y);}, 300);}animate();autoFireworks();let bombScale = 1; let bombY = window.innerHeight / 2; let bombX = window.innerWidth / 2;let bombTimer = 0;let isExploding = false; let bombActive = true; function drawBomb(x, y, scale) {ctx.save();ctx.beginPath();ctx.arc(x, y, 30 * scale, 0, Math.PI * 2, false); ctx.fillStyle = '#ffcc00'; ctx.fill();ctx.shadowBlur = 15;ctx.shadowColor = 'rgba(255, 204, 0, 0.8)'; ctx.lineWidth = 4;ctx.strokeStyle = '#ff9900';ctx.stroke();ctx.restore();}function animateBomb() {if (bombActive) {if (bombTimer < 200) {bombScale = 1 + Math.sin(bombTimer / 30) * 0.2; } else if (bombTimer >= 200 && !isExploding) {isExploding = true;setTimeout(() => {document.querySelector('.new-year-text').style.opacity = 1; createFirework(bombX, bombY); bombActive = false; }, 500); }drawBomb(bombX, bombY, bombScale);}bombTimer++;requestAnimationFrame(animateBomb); }setTimeout(animateBomb, 5000); </script>
</body>
</html>
