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

文章目录

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

1. 效果预览

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

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

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

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

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

2. 核心技术栈

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

3. 核心代码解读

3.1 HTML结构

  • 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 核心样式代码

  • 代码:
css 复制代码
.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,让文字的颜色渐变动态流动
  • 代码
css 复制代码
@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
  • 光晕呼吸动画 :通过 @keyframes glow-pulse,实现文字的光晕强弱交替变化
  • 代码
css 复制代码
@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 实现
  • 代码
css 复制代码
@keyframes move-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50vh);
  }
}
  • 使用 createFirework() 函数,动态生成火箭,并将其添加到 DOM 中
  • 代码
javascript 复制代码
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 实现,随机生成粒子的位置和颜色
  • 代码
css 复制代码
@keyframes explode {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.5);
  }
}
  • explodeFirework() 函数生成不同形状的烟花。支持多种形状,包括圆形、心型、星型、螺旋形、六芒星、花朵形等。
  • 代码
javascript 复制代码
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. 用户交互

  • 用户可以点击页面任意位置触发烟花,并播放背景音乐
  • 代码
javascript 复制代码
// 用户点击播放音乐并隐藏提示
function playMusic() {
  backgroundMusic.play().catch((err) => {
    console.error("音乐播放失败:", err);
  });
  musicPrompt.style.display = "none"; // 隐藏提示
}

window.addEventListener("click", playMusic);

5. 运行步骤

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

  • 解压文件

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

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

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

总结

  • 如有疑问,或遇到问题,请私信我或在评论区留言
  • 如果觉得还不错请给留下您宝贵的点赞收藏,感谢!
相关推荐
真的很上进38 分钟前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
Hello_WOAIAI4 小时前
批量将 Word 文件转换为 HTML:Python 实现指南
python·html·word
sanguine__4 小时前
APIs-day2
javascript·css·css3
LUwantAC5 小时前
CSS(一):选择器
前端·css
Simaoya7 小时前
【vue】圆环呼吸灯闪烁效果(模拟扭蛋机出口处灯光)
javascript·css·vue.js
GISer_Jing7 小时前
2025年前端面试热门题目——HTML|CSS|Javascript|TS知识
前端·javascript·面试·html
坐望云起7 小时前
什么是WebAssembly?怎么使用?
html·web·wasm·js
LOVE️YOU8 小时前
HTML&CSS&JavaScript&DOM 之间的关系?
前端·javascript·css·html
NoneCoder9 小时前
CSS系列(26)-- 动画性能优化详解
前端·css·性能优化
萧寂1739 小时前
ios底部小横条高度适配
css