使用 HTML 和 CSS 实现绚丽的节日烟花效果

文章目录

1. 效果预览
2. 核心技术栈
3. 核心代码解读
- 3.1 HTML结构
- 3.2 霓虹文字的CSS样式
- - 3.2.1 核心样式代码
  - 3.2.2 动画效果
- 3.3 JavaScript 的烟花效果实现
- - 3.3.1 烟花上升
  - 3.3.2 粒子爆炸
4. 用户交互
5. 运行步骤
总结

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);