獲取完整源碼

在線體驗地址：https:///tools/yanhua/

HTML代碼簡要解釋：

<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
        <svg xmlns="http://www./2000/svg">
                <!-- SVG符號定義各種圖標 -->
        </svg>
</div>

隱藏的div元素，內含SVG符號，用于定義頁面中各種圖標。

<div class="container">

應用程序的容器。

<div class="loading-init">
        <!-- 加載狀態(tài)信息 -->
</div>

加載屏幕，顯示加載狀態(tài)信息。

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

控制按鈕區(qū)域，包括暫停、聲音、設置按鈕。

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

定義加載初始狀態(tài)的樣式，包括整體寬度、居中、文本對齊方式、文本轉換為大寫、標題字體大小、狀態(tài)信息的樣式。

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

定義煙花顯示容器的樣式，包括隱藏溢出內容、取消邊框盒模型、邊框樣式、邊距樣式。在小屏幕上，取消邊框和邊距。

?? 好書推薦

《Web前端開發(fā)實戰(zhàn)》

【內容簡介】

隨著瀏覽器性能的不斷提升，越來越多的應用從C端（客戶端）轉入了B端（瀏覽器端），瀏覽器Web應用開發(fā)需求越來越多，逐漸形成了一個圍繞瀏覽器的完整生態(tài)。本書通過Web應用開發(fā)入門實例，利用HTML5、CSS3系統講解了Web前端開發(fā)中的基礎理論知識及項目開發(fā)方案。本書共分為13章，內容包括前端開發(fā)簡介、網頁排版實戰(zhàn)、表格案例實戰(zhàn)、表單案例實戰(zhàn)、CSS布局——個人簡歷制作、個性化的CSS、定位布局、彈性盒子布局、網格布局、響應式布局、移動端布局、長頁面布局、響應式布局。