【KaiGe的导航网】简约而酷炫

源码介绍

一个现代化、简约而炫酷的网站导航页面，采用深色主题配紫色特效系统，为用户提供快速访问常用网站的便捷入口。

源码截图

✨源码特性

🎨 视觉设计

• 深色主题：舒适的深色背景，减少眼部疲劳
• 紫色特效系统：统一的紫色配色方案，视觉效果优雅
• 毛玻璃效果：现代化的半透明卡片设计
• 响应式布局：完美适配桌面、平板、手机设备

🚀 动画特效

• 漂浮粒子背景：动态粒子增强视觉层次
• 扫光特效：链接悬停时的扫光动画
• 波纹效果：点击时的波纹扩散动画
• 图标旋转：悬停时图标的旋转和发光效果
• 渐入动画：页面加载时的优雅渐入效果

🛠️ 功能特性

• 自动图标获取：使用Google Favicon服务自动获取网站真实图标
• 分类管理：清晰的网站分类组织
• 广告推广区域：支持服务推荐和社群推广
• 深色模式支持：自动适应系统深色模式偏好
• 减少动画支持：遵循用户的动画偏好设置

使用教程

⚙️ 自定义配置

修改网站标题

在 index.html 中修改：

<h1 class="title">KaiGe的导航网</h1>
<p class="subtitle">发现精彩，连接世界</p>

添加新的网站链接

在对应分类的 links-grid 中添加：

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

自定义广告内容

在 index.html 中的广告区域修改：

<div class="ad-section">
    <div class="ad-title">推荐服务</div>
    <div class="ad-links">
        <a href="你的链接" class="ad-link" target="_blank">你的广告内容</a>
    </div>
</div>

🌟 特色功能详解

自动图标系统

使用Google的Favicon服务自动获取网站真实图标：

<img src="https://www.google.com/s2/favicons?domain=网站域名&sz=32" 
     class="site-favicon" 
     onerror="备用图标显示逻辑">

🔄 更新日志

v2.0.0 (最新)

• ✨ 重新设计为深色主题配紫色特效
• 🎨 添加动态粒子背景和扫光特效
• 📱 优化移动端响应式体验
• 🔧 新增自动图标获取功能
• 🎯 重新整理网站分类和链接

v1.0.0

• 🎉 初始版本发布
• 🎨 基础导航功能
• 📱 响应式布局