简约而炫酷的网站导航页面HTML源码

🌌 项目概述

这是一个现代化、简约而炫酷的网站导航页面，采用深色主题配紫色特效系统，为用户提供快速访问常用网站的便捷入口。通过毛玻璃效果、粒子动画和智能交互设计，将实用性与视觉美学完美结合。

✨ 核心特性

🎨 视觉设计

深色主题

采用 #1a1a1a 深色背景，搭配 #6a0dad 紫色高光，减少眼部疲劳
示例代码：

body {
    background-color: #1a1a1a;
    color: #e0e0e0;
}
.card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

紫色特效系统

按钮、图标悬停时使用 #8e44ad 到 #9b59b6 的渐变过渡
示例代码：

.btn:hover {
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
}

响应式布局

使用 CSS Grid + Flexbox 实现自适应布局
移动端适配示例：

@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

🚀 动画特效

漂浮粒子背景

使用 HTML5 Canvas 实现动态粒子
示例代码：

const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
// 粒子生成逻辑...

扫光特效

使用 CSS 线性渐变 + 动画实现：

.hover-effect::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #6a0dad88, transparent);
    animation: sweep 2s infinite;
}

波纹点击效果

使用 JavaScript + CSS 动画实现：

document.querySelectorAll('.ripple').forEach(el => {
    el.addEventListener('click', e => {
        const ripple = document.createElement('span');
        ripple.style.left = `${e.offsetX}px`;
        ripple.style.top = `${e.offsetY}px`;
        el.appendChild(ripple);
        setTimeout(() => ripple.remove(), 1000);
    });
});

🛠️ 功能特性

自动图标获取

通过 Google Favicon 服务动态获取网站图标：

<img src="https://www.google.com/s2/favicons?domain=example.com" />

分类管理

使用 JSON 数据管理网站分类：

{
    "开发工具": [
        {"name": "GitHub", "url": "https://github.com"},
        {"name": "Stack Overflow", "url": "https://stackoverflow.com"}
    ]
}

深色模式适配

自动检测系统偏好：

@media (prefers-color-scheme: dark) {
    body {
        background: #121212;
    }
}

📁 项目结构详解

导航站源码/
├── index.html          # 主页面文件
├── style.css           # 样式文件
├── script.js           # JavaScript交互文件
├── assets/             # 静态资源目录
│   ├── particles.js    # 粒子动画库
│   └── favicon.ico     # 网站图标
└── README.md           # 项目说明文档

🧩 快速上手示例

HTML 结构

<div class="container">
    <header>
        <h1>🌟 我的导航站</h1>
        <div class="search-bar">
            <input type="text" placeholder="搜索网站..." />
        </div>
    </header>

    <main class="grid">
        <!-- 动态生成网站卡片 -->
        <a href="https://github.com" class="card">
            <img src="https://www.google.com/s2/favicons?domain=github.com" />
            <span>GitHub</span>
        </a>
    </main>
</div>

核心样式

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    padding: 20px;
}

.card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #6a0dad;
}