# Creative-Web-Collection

**Repository Path**: zunyi-gabe/Creative-Web-Collection

## Basic Information

- **Project Name**: Creative-Web-Collection
- **Description**: 本仓库专注于分享各种令人惊艳的炫酷网页的实现案例，如后台登录、首页、节日祝福页等。涵盖HTML、CSS、JavaScript以及一些流行的前端库（如particles.js、Three.js等）。无论你是想学习如何实现动态效果、交互设计，还是寻找节日主题的创意灵感，都可以来这里看看
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 2
- **Created**: 2025-03-27
- **Last Updated**: 2025-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Creative Web Collection 🎨

一个持续更新的创意网页集合仓库，包含各种炫酷、互动性强的前端效果实现。适合学习、参考和快速集成到项目中。

![Banner](/screenshots/03.png)

## 🌟 当前收录项目

| 项目名称 | 技术亮点 | 预览图 | 最近更新 |
|---------|---------|--------|---------|
| [粒子特效](/projects/登录类/粒子特效版.html) | particles.js, 玻璃拟态 | ![preview1](/screenshots/03.png) | 2025.03.27 |
| [3D霓虹](/projects/登录类/3D霓虹版.html) | CSS 3D变换, 鼠标追踪 | ![preview2](/screenshots/01.png) | 2025.03.27 |
| [玻璃拟态](/projects/登录类/玻璃拟态版.html) | CSS动画, backdrop-filter | ![preview3](/screenshots/02.png) | 2025.03.27 |
| [星际太空](/projects/登录类/星际太空版.html) | 动态星空背景+悬浮动画 | ![preview3](/screenshots/05.png) | 2025.03.27 |
| [赛博朋克](/projects/登录类/赛博朋克.html) | 霓虹网格+扫描线效果 | ![preview3](/screenshots/06.png) | 2025.03.27 |
| [极光效果](/projects/登录类/极光效果.html) | 流动渐变背景+毛玻璃UI | ![preview3](/screenshots/07.png) | 2025.03.27 |
| [水墨画](/projects/登录类/水墨画风格.html) | 中国风设计+水墨动画 | ![preview3](/screenshots/08.png) | 2025.03.27 |
| [故障艺术](/projects/登录类/故障艺术.html) | Glitch效果+CRT显示器模拟 | ![preview3](/screenshots/09.png) | 2025.03.27 |
| [珊瑚橙](/projects/登录类/热带珊瑚橙.html) | 活力橙色+气泡动画 | ![preview3](/screenshots/10.png) | 2025.03.28 |
| [薄荷绿](/projects/登录类/薄荷绿.html) | 清新绿色+落叶效果 | ![preview3](/screenshots/11.png) | 2025.03.28 |
| [薰衣草紫](/projects/登录类/薰衣草紫.html) | 浪漫紫色+花朵漂浮 | ![preview3](/screenshots/12.png) | 2025.03.28 |
| [深海蓝](/projects/登录类/深海蓝.html) | 深邃蓝色+波浪气泡 | ![preview3](/screenshots/13.png) | 2025.03.28 |
| [日落粉金](/projects/登录类/日落粉金.html) | 温暖渐变色+阳光射线 | ![preview3](/screenshots/14.png) | 2025.03.28 |
| [粒子漩涡](/projects/登录类/粒子漩涡.html) | 粒子漩涡+3D旋转 | ![preview3](/screenshots/21.png) | 2025.03.31 |
| [低多边形地形](/projects/登录类/低多边形地形.html) | 3D旋转 | ![preview3](/screenshots/22.png) | 2025.03.31 |
| [动态几何体](/projects/登录类/动态几何体.html) | 3D旋转 | ![preview3](/screenshots/23.png) | 2025.03.31 |
| [3D翻转](/projects/登录类/3D翻转.html) | 3D翻转 | ![preview3](/screenshots/24.png) | 2025.03.31 |
| [春节祝福](/projects/节日类/春节.html) | CSS动画, backdrop-filter | ![preview3](/screenshots/04.png) | 2025.03.27 |
| [3D交互](/projects/Three.js类/创意交互.html) | 第三人称视角+鼠标交互 | ![preview3](/screenshots/15.png) | 2025.03.28 |
| [太空探险](/projects/404页面/太空探险.html) | css动画 | ![preview3](/screenshots/16.png) | 2025.03.28 |
| [侦探解谜](/projects/404页面/侦探解谜.html) | css动画 | ![preview3](/screenshots/17.png) | 2025.03.28 |
| [游戏关卡](/projects/404页面/游戏关卡.html) | css动画 | ![preview3](/screenshots/18.png) | 2025.03.28 |
| [厨房灾难](/projects/404页面/厨房灾难.html) | css动画 | ![preview3](/screenshots/19.png) | 2025.03.28 |
| [复古电脑](/projects/404页面/复古电脑.html) | css动画 | ![preview3](/screenshots/20.png) | 2025.03.28 |
| *更多正在开发中...* | | | |

## 🚀 快速使用

1. 克隆仓库：
```bash
git clone https://gitee.com/zunyi-gabe/Creative-Web-Collection.git
```
2. 进入具体项目目录:
```bash
cd 项目目录名
```
3. 直接打开 xx.html 即可运行

## 🧩 项目特点
- 即插即用：每个项目都是独立完整的

- 详细注释：关键代码都有详细说明

- 响应式设计：适配多种设备

- 模块化结构：方便集成到现有项目

## 📂 目录规范
```text
creative-web-collection/
├── projects/                  # 所有项目目录
│   ├── 登录类/                 # 登录页面集合
│   ├── 节日类/                 # 节日页面集合
│   ├── Three.js类/             # 3D特效页面集合
│   ├── 404页面/                # 404页面集合
│   └── ...                    # 更多项目
├── screenshots/               # 所有项目截图
├── assets/                    # 所有项目用到的静态资源
├── docs/                      # 开发文档
│   ├── CODESTYLE.md           # 代码规范
│   └── CONTRIBUTING.md        # 贡献指南
└── README.md                  # 本文件
```
> 💡 提示：每个项目都是独立完整的，可直接复制使用
## 🛠 技术栈覆盖
- HTML5
- CSS3
- JavaScript
- Vue
- Three.js

## 🤝 参与贡献
- 欢迎提交新的创意网页！请遵循：

- 在 projects/ 下创建新目录，命名格式：序号-简短描述

- 添加完整的 README.md 项目说明

- 提交清晰的项目截图到 screenshots/

- 确保代码符合 CODESTYLE.md

## 📅 更新计划
- 添加Canvas动画示例

- 实现WebGL交互页面

- 收集更多CSS创意效果

- 增加React/Vue版本

## 📜 许可证
MIT License © 2025 [jiaberrr/zunyi]
💡 提示：所有项目都可自由使用，商业项目请注明出处