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

news2024/12/31 22:48:44

文章目录

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