#?KaiGe 的導航網
一個現代化、簡約而炫酷的網站導航頁面，采用深色主題配紫色特效系統，為用戶提供快速訪問常用網站的便捷入口。
##?? 特性
###??? 視覺設計
– ** 深色主題 **：舒適的深色背景，減少眼部疲勞
– ** 紫色特效系統 **：統一的紫色配色方案，視覺效果優雅
– ** 毛玻璃效果 **：現代化的半透明卡片設計
– ** 響應式布局 **：完美適配桌面、平板、手機設備
###??? 動畫特效
– ** 漂浮粒子背景 **：動態粒子增強視覺層次
– ** 掃光特效 **：鏈接懸停時的掃光動畫
– ** 波紋效果 **：點擊時的波紋擴散動畫
– ** 圖標旋轉 **：懸停時圖標的旋轉和發光效果
– ** 漸入動畫 **：頁面加載時的優雅漸入效果
###???? 功能特性
– ** 自動圖標獲取 **：使用 Google Favicon 服務自動獲取網站真實圖標
– ** 分類管理 **：清晰的網站分類組織
– ** 廣告推廣區域 **：支持服務推薦和社群推廣
– ** 深色模式支持 **：自動適應系統深色模式偏好
– ** 減少動畫支持 **：遵循用戶的動畫偏好設置
##??? 項目結構
“`
導航站源碼 /
├── index.html? ?? ?? ? # 主頁面文件
├── style.css? ?? ?? ???# 樣式文件
├── script.js? ?? ?? ???# JavaScript 交互文件
└── README.md? ?? ?? ? # 項目說明文檔
“`
###?2. 本地運行
直接用瀏覽器打開 `index.html` 即可，或使用本地服務器：
“`bash
# 使用 Python
python?-m?http.server?8000
# 使用 Node.js
npx?serve?.
# 使用 PHP
php?-S?localhost:8000
“`
###?3. 訪問網站
在瀏覽器中訪問 `http://localhost:8000`
##??? 自定義配置
###? 修改網站標題
在 `index.html` 中修改：
“`html
<h1?class=“title”>KaiGe 的導航網 </h1>
<p?class=“subtitle”> 發現精彩，連接世界 </p>
“`
###? 添加新的網站鏈接
在對應分類的 `links-grid` 中添加：
“`html
<a?href=“ 網站地址 ”?class=“nav-link”?target=“_blank”>
<img?src=“https://www.google.com/s2/favicons?domain= 網站域名 &sz=32”
class=“site-favicon”
alt=“ 網站名稱 ”
onerror=“this.style.display=‘none’;?this.nextElementSibling.style.display=‘inline-block’;”>
<span?class=“link-icon”?style=“display:none;”>??</span>
網站名稱
</a>
“`
###? 修改配色方案
在 `style.css` 中調整紫色相關的 CSS 變量：
“`css
/* 主要紫色 */
color: #c084fc;
background: linear-gradient(135deg,?#c084fc,?#a855f7);
/* 懸停效果 */
background: rgba(196, 181, 253, 0.15);
border-color: rgba(196, 181, 253, 0.4);
“`
###? 自定義廣告內容
在 `index.html` 中的廣告區域修改：
“`html
<div?class=“ad-section”>
<div?class=“ad-title”> 推薦服務 </div>
<div?class=“ad-links”>
<a?href=“ 你的鏈接 ”?class=“ad-link”?target=“_blank”> 你的廣告內容 </a>
</div>
</div>
“`
##??? 技術棧
– **HTML5**：語義化標記
– **CSS3**：現代 CSS 特性（Grid、Flexbox、動畫、濾鏡）
– **JavaScript (ES6+)**：交互功能和動畫控制
– **Google Fonts API**：自動獲取網站圖標
##??? 響應式設計
– ** 桌面端 **：> 768px，多列網格布局
– ** 平板端 **：768px – 480px，自適應列數
– ** 手機端 **：< 480px, 雙列布局, 優化觸摸體驗
##??? 特色功能詳解
###? 自動圖標系統
使用 Google 的 Favicon 服務自動獲取網站真實圖標：
“`html
<img?src=“https://www.google.com/s2/favicons?domain= 網站域名 &sz=32”
class=“site-favicon”
onerror=“ 備用圖標顯示邏輯 “>
“`
###? 動畫性能優化
– 使用 CSS transform 和 opacity 進行動畫，避免重排重繪
– 支持用戶的減少動畫偏好設置
– 硬件加速優化，流暢的 60fps 動畫
###? 兼容性處理
– 支持現代瀏覽器的深色模式
– 優雅降級處理
– 移動端觸摸優化
—
** 感謝使用 KaiGe 的導航網！** ??
下載鏈接：
