解說與分析

🛠️ 程式碼使用的語法 (Technology Used)

這個網頁使用了以下三種核心技術：

語法	用途	說明
HTML	結構 (Structure)	定義網頁內容的框架 (如標題、容器)。
CSS	特效與樣式 (Styling & Animation)	負責所有視覺效果，包括背景漸層、月亮樣式、星星和流星的動畫定義。
JavaScript (JS)	行為與動態 (Behavior & Dynamic Control)	負責在網頁中動態創建數百顆星星，並循環控制流星的出現和軌跡。

🏷️ HTML 標籤說明 (HTML Tags Analysis)

結構與元數據標籤

標籤	語法範例	用途說明
`<!DOCTYPE html>`	`<!DOCTYPE html>`	設定文件類型為 HTML5。
`<html>`	`<html lang="zh-TW">`	網頁根元素，設定網頁的語言。
`<head>`	`<head>...</head>`	包含網頁的不可見資訊 (標題、樣式、設定)。
`<body>`	`<body>...</body>`	包含網頁的所有可見內容 (標題、星星容器、腳本)。
`<meta>`	`<meta charset="UTF-8">`	設定字符編碼為 UTF-8，防止亂碼。
`<title>`	`<title>星空</title>`	設定瀏覽器標籤頁上的標題。
`<style>`	`<style>...</style>`	嵌入 CSS 樣式程式碼。
`<script>`	`<script>...</script>`	嵌入或執行 JavaScript 程式碼。

內容標籤

標籤	語法範例	用途說明
`<h1>`	`<h1>Hello World</h1>`	頁面主標題。
`<div>`	`<div class="moon">`	通用的區塊容器。在程式碼中用於創建月亮、星星容器、流星，是實現特效的主要骨架。
`<a>`	`<a href="...">...</a>`	超連結，用於底部的 GitHub 連結。

🎨 關鍵 CSS 樣式與技巧 (Key CSS Techniques)

1. 夜空背景的實現

使用了徑向漸變 (radial-gradient) 創造了由深到淺的夜空效果：

background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);

2. 星星的閃爍動畫 (Twinkle)

背景的靜態星星是通過 JavaScript 生成，並搭配 CSS 關鍵幀動畫 (@keyframes) 實現持續閃爍：

            /* CSS 關鍵幀動畫定義 */

            @keyframes twinkle {

              0% { opacity: 0; }

              50% { opacity: 1; }

              100% { opacity: 0; }

            }

            /* 在 .star 樣式中應用動畫並設定無限循環 */

            .star { animation-name: 'twinkle'; animation-iteration-count: infinite; }

3. 流星劃過動畫 (Shooting Star)

使用 @keyframes shoot 控制流星的旋轉和位移：

            @keyframes shoot {

              100% {

                transform: rotate(315deg) translateX(-1500px); /* 旋轉並移動很遠 */

              }

            }

            /* 尾巴是透過 ::before 偽元素搭配線性漸變 (linear-gradient) 製作 */

            .shooting-star::before { background: linear-gradient(90deg, #fff, transparent); }

4. 標題與月亮的光暈

利用多重陰影創造發光效果：

標題光暈: text-shadow: 0 0 10px #fff, 0 0 20px #00f, ...;
月亮光暈: box-shadow: 0 0 10px #fff, 0 0 20px #f9f9f9;

💡 JavaScript 行為分析 (<script> 區塊)

JS 在這個網頁中扮演了動態生成和無限循環的關鍵角色，實現了高效能的動畫效果。

1. 背景星星的動態生成

JS 使用 document.createElement('div') 循環創建 150 個 <div class="star"> 元素，並為每個星星隨機設定屬性：

隨機位置: 使用 Math.random() * 100 設置 left 和 top (以 vw / vh 為單位)。
隨機大小: 設置 width 和 height。
隨機動畫: 設置 animationDuration (速度) 和 animationDelay (錯開閃爍時間)。

            function createStar() { ... }

            for (let i = 0; i < NUMBER_OF_STARS; i++) {

              createStar(); // 循環創建 150 顆星星

            }

2. 流星的無限循環重啟 (Performance Optimization)

為了實現流星不斷劃過，JS 採用了高效的監聽動畫結束做法：

創建固定元素: 只創建 4 顆流星元素 (NUM_SHOOTING_STARS = 4)。
監聽結束: 每個流星元素監聽 animationend 事件。
重設並重啟: 當流星動畫結束時，立即呼叫 resetShootingStar(this) 函式，隨機設定新的起點和速度，並強制瀏覽器重繪 (offsetHeight)，從而重新啟動 CSS 劃過動畫。

            shootingStar.addEventListener('animationend', function() {

              resetShootingStar(this); // 動畫結束後立即重設並重啟

            });

⭐ 星空網頁程式碼分析