1. 效果预览

• 打开后输入文本的展示内容
  

• 用户点击页面后播放背景音乐，并隐藏提示

• 绚丽的动态烟花效果，支持多种烟花形状：心型、螺旋形、圆形、六芒星型、星型、花朵型
  
  

• 炫酷的霓虹文字效果，动态颜色渐变与光晕呼吸动画

• 点击任意位置触发烟花爆炸，粒子颜色与样式随机

2. 核心技术栈

• HTML5：搭建页面结构，定义容器和音频。
• CSS3：实现动画效果（烟花、霓虹文字等）。
• JavaScript：控制用户交互、生成烟花、随机效果等逻辑。

3. 核心代码解读

3.1 HTML结构

• HTML 部分主要包含以下元素：

  • 一个动态文字容器，顶部显示“节日快乐”字样。
  • 一个用于展示烟花效果的容器。
  • 一个隐藏的背景音乐播放器。
  • 一个提示用户点击的文字提示

• 代码：

<div class="dynamic-text" id="dynamicText">XXX，节日快乐！</div>
<div class="firework-container" id="firework-container"></div>
<div id="musicPrompt">点击页面任意位置播放音乐并观看烟花</div>
<audio id="backgroundMusic" loop><source src="xue.mp3" type="audio/mpeg">您的浏览器不支持音频播放。
</audio>

3.2 霓虹文字的CSS样式

文字部分的样式通过 CSS 动画 增强，包括颜色渐变流动、呼吸光晕效果以及动态文字的模糊效果

3.2.1 核心样式代码

• 代码:

.dynamic-text {position: absolute;top: 20px;left: 50%;transform: translateX(-50%);font-size: 48px;font-weight: bold;color: #fff;text-align: center;background: linear-gradient(90deg, #ff00ff, #ff8800, #ff00ff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: gradient-flow 5s infinite linear, glow-pulse 2s infinite ease-in-out;text-shadow: 0 0 5px #ff00ff,0 0 10px #ff00ff,0 0 20px #ff00ff,0 0 40px #ff8800,0 0 80px #ff8800;letter-spacing: 5px;
}

3.2.2 动画效果

• 渐变流动效果：通过 @keyframes gradient-flow，让文字的颜色渐变动态流动
• 代码：

@keyframes gradient-flow {0% {background-position: 0% 50%;}100% {background-position: 100% 50%;}
}

• 光晕呼吸动画：通过 @keyframes glow-pulse，实现文字的光晕强弱交替变化
• 代码：

@keyframes glow-pulse {0%, 100% {text-shadow: 0 0 5px #ff00ff,0 0 10px #ff00ff,0 0 20px #ff00ff,0 0 40px #ff8800,0 0 80px #ff8800;}50% {text-shadow: 0 0 10px #ff00ff,0 0 20px #ff00ff,0 0 40px #ff00ff,0 0 60px #ff8800,0 0 100px #ff8800;}
}

3.3 JavaScript 的烟花效果实现

烟花效果是项目的核心部分，它通过 JavaScript 动态生成粒子，并为每个粒子赋予不同的运动轨迹

3.3.1 烟花上升

• 每个烟花爆炸之前，会有一个火箭从页面底部升起
• 火箭动画通过 CSS 的 @keyframes move-up 实现
• 代码：

@keyframes move-up {0% {transform: translateY(0);}100% {transform: translateY(-50vh);}
}

• 使用 createFirework() 函数，动态生成火箭，并将其添加到 DOM 中
• 代码：

function createFirework(x = Math.random() * window.innerWidth, y = window.innerHeight * 0.5) {const rocket = document.createElement("div");rocket.classList.add("rocket");rocket.style.left = `${x}px`; // 设置火箭水平位置rocket.style.bottom = "0px"; // 从页面底部发射container.appendChild(rocket);// 火箭到达中间后爆炸rocket.addEventListener("animationend", () => {rocket.remove(); // 移除火箭explodeFirework(x, y); // 绽放烟花});
}

3.3.2 粒子爆炸

• 每个烟花到达目标高度后，触发爆炸生成粒子
• 粒子的动画由 @keyframes explode 实现，随机生成粒子的位置和颜色
• 代码：

@keyframes explode {0% {opacity: 1;transform: translate(0, 0) scale(1);}100% {opacity: 0;transform: translate(var(--dx), var(--dy)) scale(0.5);}
}

• explodeFirework() 函数生成不同形状的烟花。支持多种形状，包括圆形、心型、星型、螺旋形、六芒星、花朵形等。
• 代码：

function explodeFirework(x, y) {const types = ["circle", "heart", "star", "spiral", "six-pointed", "flower"];const type = types[Math.floor(Math.random() * types.length)];const particleCount = 150;for (let i = 0; i < particleCount; i++) {const particle = document.createElement("div");particle.classList.add("particle");let dx, dy;if (type === "circle") {const angle = (i / particleCount) * Math.PI * 2;dx = Math.cos(angle) * 200;dy = Math.sin(angle) * 200;} else if (type === "heart") {const angle = (i / particleCount) * Math.PI * 2;dx = 16 * Math.pow(Math.sin(angle), 3) * 10;dy = -(13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle)) * 10;} else if (type === "star") {const angle = (i % 5) * (Math.PI * 2) / 5;const distance = i % 2 === 0 ? 150 : 80;dx = Math.cos(angle) * distance;dy = Math.sin(angle) * distance;} 

4. 用户交互

• 用户可以点击页面任意位置触发烟花，并播放背景音乐
• 代码：

// 用户点击播放音乐并隐藏提示
function playMusic() {backgroundMusic.play().catch((err) => {console.error("音乐播放失败：", err);});musicPrompt.style.display = "none"; // 隐藏提示
}window.addEventListener("click", playMusic);

5. 运行步骤

• 下载源码压缩包 —— 烟花实现

• 解压文件

• 双击烟花.html 即可通过浏览器打开

• 在弹出对话框中输入你要显示的文本

• 点击屏幕任意位置，播放背景音乐这里默认歌曲是《봄눈》（春雪）

总结

• 如有疑问，或遇到问题，请私信我或在评论区留言
• 如果觉得还不错请给留下您宝贵的点赞收藏，感谢！