2024年HTML+CSS+JS 网页版烟花代码

• 💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】
• 🤟 基于Web端打造的：👉轻量化工具创作平台
• 💅 想寻找共同学习交流的小伙伴，请点击【全栈技术交流群】

直接跳到末尾 获取完整源码

在线体验地址：https://haiyong.site/tools/yanhua/

HTML代码简要解释：

<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
        <svg xmlns="http://www.w3.org/2000/svg">
                <!-- SVG符号定义各种图标 -->
        </svg>
</div>

隐藏的div元素，内含SVG符号，用于定义页面中各种图标。

<div class="container">

应用程序的容器。

<div class="loading-init">
        <!-- 加载状态信息 -->
</div>

加载屏幕，显示加载状态信息。

<div class="stage-container remove">

烟花显示容器，初始时可能被移除。

<div class="canvas-container">
        <canvas id="trails-canvas"></canvas>
        <canvas id="main-canvas"></canvas>
</div>

用于烟花动画的两个画布元素。

<div class="controls">
        <div class="btn pause-btn">
                <!-- 暂停按钮 -->
        </div>
        <div class="btn sound-btn">
                <!-- 声音按钮 -->
        </div>
        <div class="btn settings-btn">
                <!-- 设置按钮 -->
        </div>
</div>

控制按钮区域，包括暂停、声音、设置按钮。

            <div class="menu hide">
                    <!-- 定制菜单 -->
            </div>
        </div>
    </div>
    <div class="help-modal">
            <!-- 帮助信息的弹出式窗口 -->
    </div>
</div>

定制菜单和帮助信息的弹窗。

<script src='./js/fscreen.js'></script>
<script src='./js/Stage.js'></script>
<script src='./js/MyMath.js'></script>
<script src="./js/script.js"></script>

引入JavaScript文件，实现烟花显示的功能和动画。

CSS样式简要解释：

* {
  position: relative;
  box-sizing: border-box;
}

通用选择器，设置所有元素的position属性为相对定位，box-sizing为边框盒模型。

html,
body {
  height: 100%;
}

设置HTML和body元素的高度为100%。

html {
  background-color: #000;
}

设置HTML元素的背景色为黑色。

body {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-family: "Russo One", arial, sans-serif;
  line-height: 1.25;
  letter-spacing: 0.06em;
}

设置body元素的样式，包括隐藏溢出内容、文字颜色、字体、行高和字母间距。

.hide {
  opacity: 0;
  visibility: hidden;
}

.remove {
  display: none !important;
}

定义两个类，.hide用于隐藏元素（透明度为0，不可见），.remove用于完全移除元素（使用!important以确保覆盖其他样式）。

.blur {
  filter: blur(12px);
}

定义一个模糊效果类，应用于元素时会使其模糊。

.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

定义一个容器类，使元素垂直和水平居中。

.loading-init {
  width: 100%;
  align-self: center;
  text-align: center;
  text-transform: uppercase;
}

.loading-init__header {
  font-size: 2.2em;
}

.loading-init__status {
  margin-top: 1em;
  font-size: 0.8em;
  opacity: 0.75;
}

定义加载初始状态的样式，包括整体宽度、居中、文本对齐方式、文本转换为大写、标题字体大小、状态信息的样式。

.stage-container {
  overflow: hidden;
  box-sizing: initial;
  border: 1px solid #222;
  margin: -1px;
}
@media (max-width: 840px) {
  .stage-container {
    border: none;
    margin: 0;
  }
}

定义烟花显示容器的样式，包括隐藏溢出内容、取消边框盒模型、边框样式、边距样式。在小屏幕上，取消边框和边距。

?? 好书推荐

《Web前端开发实战》

【内容简介】

随着浏览器性能的不断提升，越来越多的应用从C端（客户端）转入了B端（浏览器端），浏览器Web应用开发需求越来越多，逐渐形成了一个围绕浏览器的完整生态。本书通过Web应用开发入门实例，利用HTML5、CSS3系统讲解了Web前端开发中的基础理论知识及项目开发方案。本书共分为13章，内容包括前端开发简介、网页排版实战、表格案例实战、表单案例实战、CSS布局——个人简历制作、个性化的CSS、定位布局、弹性盒子布局、网格布局、响应式布局、移动端布局、长页面布局、响应式布局。

📚 京东购买链接：《Web前端开发实战》

完整免费源码可通过公众号海拥回复【2024烟花】获取，或者添加下方👇🏻微信💌