# awsome-ui

**Repository Path**: ybli_code/awsome-ui

## Basic Information

- **Project Name**: awsome-ui
- **Description**: 本项目旨在汇总优秀、精美的 UI 设计案例。每一个案例都是一个独立的项目，可以直接运行，代码清晰，方便开发者快速应用于实际开发中。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-08
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Awesome UI (优秀 UI 案例库)

本项目旨在汇总优秀、精美的 UI 设计案例。每一个案例都是一个独立的项目，可以直接运行，代码清晰，方便开发者快速应用于实际开发中。

## ✨ 项目特点

- **精选案例**：收录视觉效果出色、交互流畅的 UI 组件或页面。
- **即插即用**：每个案例都相对独立，包含必要的 HTML/CSS/JS 代码。
- **易于定制**：代码结构简单，方便根据需求修改样式和逻辑。

## 📂 案例列表

| 编号 | 名称 | 简介 | 路径 |
| :--- | :--- | :--- | :--- |
| 01 | Card Beam Animation | 带有光束流光效果的卡片动画 | [预览](https://ybli-code.github.io/awsome-ui/1-card-beam-animation/dist/index.html) / [源码](./1-card-beam-animation/) |
| 02 | Interactive Swiping Card UI | 可交互的滑动卡片 UI | [预览](https://ybli-code.github.io/awsome-ui/2-interactive-swiping-card-ui/dist/index.html) / [源码](./2-interactive-swiping-card-ui/) |
| 03 | Liquid Glass | 液态玻璃变形效果 | [预览](https://ybli-code.github.io/awsome-ui/3-liquid-glass/dist/index.html) / [源码](./3-liquid-glass/) |
| 04 | Neumorphism UI Card | 新拟态 UI 卡片 (Sass) | [预览](https://ybli-code.github.io/awsome-ui/4-neumorphism-ui-card/dist/index.html) / [源码](./4-neumorphism-ui-card/) |
| 05 | Google Antigravity | 使用现代 CSS 实现的 Google Antigravity 效果 | [预览](https://ybli-code.github.io/awsome-ui/5-index-with-modern-css/dist/index.html) / [源码](./5-index-with-modern-css/) |
| 06 | WebGL Shader Hero Design | WebGL 和 GLSL 实现的英雄区设计 | [预览](https://ybli-code.github.io/awsome-ui/6-webgl-shader-hero-design/dist/index.html) / [源码](./6-webgl-shader-hero-design/) |
| 07 | Colored Glowing Edge Card | 彩色发光边缘卡片效果 | [预览](https://ybli-code.github.io/awsome-ui/7-colored-glowing-edge-card/dist/index.html) / [源码](./7-colored-glowing-edge-card/) |
| 08 | Gradient Pulse Animation | 渐变脉冲动画效果 | [预览](https://ybli-code.github.io/awsome-ui/8-gradient-pulse-animation/dist/index.html) / [源码](./8-gradient-pulse-animation/) |
| 09 | Mega-Bot AI | AI 聊天机器人界面 | [预览](https://ybli-code.github.io/awsome-ui/9-mega-bot-ai/dist/index.html) / [源码](./9-mega-bot-ai/) |
| 10 | Scroll to Bloom | 滚动绽放效果 | [预览](https://ybli-code.github.io/awsome-ui/10-scroll-to-bloom/dist/index.html) / [源码](./10-scroll-to-bloom/) |
| 11 | Organic AI Orb | 有机态 AI 光球动画 | [预览](https://ybli-code.github.io/awsome-ui/11-organic-ai-orb/dist/index.html) / [源码](./11-organic-ai-orb/) |
| 12 | Elastic Checkboxes | 弹性复选框动画 | [预览](https://ybli-code.github.io/awsome-ui/12-elastic-checkboxes/dist/index.html) / [源码](./12-elastic-checkboxes/) |
| 13 | The Grand Finale 2026 | 2026 新年倒计时与烟花庆典效果 | [预览](https://ybli-code.github.io/awsome-ui/13-the-grand-finale-2026/dist/index.html) / [源码](./13-the-grand-finale-2026/) |
| 14 | Vertical Tabs | 垂直标签页切换界面 | [预览](https://ybli-code.github.io/awsome-ui/14-vertical-tabs/dist/index.html) / [源码](./14-vertical-tabs/) |

## 🚀 如何使用

1. 克隆或下载本项目到本地。
2. 进入相应的案例目录（例如 `1-card-beam-animation`）。
3. 直接在浏览器中打开 `src/index.html` 即可预览效果。
4. 参考 `src` 目录下的 `style.css` 和 `script.js` 将效果集成到你的项目中。

## 🤝 贡献

欢迎提交 Pull Request 分享更多优秀的 UI 案例！