#爱播爱播最新地址 官方 视频 https://455555.xyz

GlassUI

玻璃态 CSS3 动画框架与设计系统

官方演示场  ·  问题反馈  ·  更新日志  ·  贡献指南

---

---

GlassUI 是什么

GlassUI 是一套轻量、零依赖的纯 CSS3 动画框架与设计系统，以 Glassmorphism（玻璃态） 为核心视觉语言，结合原子化工具类与可组合的动画关键帧库，帮助开发者快速构建具有毛玻璃质感的现代 UI。

它的设计哲学很简单：

• 纯 CSS3，零 JS 运行时 — 所有动画与组件样式均由标准 @keyframes、backdrop-filter 和 CSS 自定义属性驱动，不引入任何 JavaScript 依赖。
• 原子化组合 — 类名采用 属性-值 命名范式，像搭积木一样自由拼装布局、间距、圆角、阴影、颜色。
• 动画即工具类 — 每条 @keyframes 对应一个 .animate-* 类，辅以时长、延迟、重复、缓动等微调工具类，一行 class 即可完成动效编排。
• 令牌驱动主题 — 全局颜色、间距、动画参数均通过 CSS 自定义属性暴露，只需覆盖 :root 变量即可实现整站主题切换。
• 无障碍优先 — 内建 prefers-reduced-motion 媒体查询，晕动症用户自动跳过动画。

---

安装

通过 pnpm 安装（推荐）

# 克隆仓库
git clone https://github.com/aidizhi/aiboaibo.com.git
cd aiboaibo.com

# 安装开发依赖
pnpm install

在项目中引入样式

<!-- 引入动画关键帧库 -->
<link rel="stylesheet" href="styles/animations.css">

<!-- 引入原子化工具类库 -->
<link rel="stylesheet" href="styles/utilities.css">

本地开发

# 启动本地开发服务器
pnpm dev

# 运行测试
pnpm test

# 样式规范检查
pnpm lint

---

快速上手

一个最简单的玻璃态卡片只需几行 HTML：

<div class="flex items-center justify-center h-screen bg-base">

  <!-- 玻璃态卡片 -->
  <div class="relative rounded-2xl p-8 max-w-md shadow-xl
              animate-fadeIn animate-duration-700"
       style="background: rgba(255,255,255,0.08);
              backdrop-filter: blur(16px);
              border: 1px solid rgba(255,255,255,0.12);">
    <h2 class="text-2xl font-bold text-white mb-4">GlassUI 欢迎你</h2>
    <p class="text-muted text-base">
      这是一个基于 Backdrop Filter 构建的毛玻璃卡片。
    </p>
    <button class="mt-6 px-6 py-2 rounded-lg bg-primary text-white
                   shadow-primary text-base font-medium
                   animate-zoomIn animate-delay-500">
      开始使用
    </button>
  </div>

</div>

组合多个动画工具类，打造交错入场效果：

<div class="flex flex-col gap-4 p-6">

  <div class="animate-slideUp animate-duration-500">
    <span class="text-muted text-sm">第一个元素率先滑入</span>
  </div>

  <div class="animate-slideUp animate-duration-500 animate-delay-100">
    <span class="text-muted text-sm">第二个元素延迟 100ms 滑入</span>
  </div>

  <div class="animate-slideUp animate-duration-500 animate-delay-200">
    <span class="text-muted text-sm">第三个元素延迟 200ms 滑入</span>
  </div>

  <div class="animate-slideUp animate-duration-500 animate-delay-300">
    <span class="text-muted text-sm">第四个元素延迟 300ms 滑入</span>
  </div>

</div>

---

类命名规范

GlassUI 的类名遵循统一的 模块-值 范式，保持直觉化的可读性：

命名规则总览

模块前缀	命名格式	示例	说明
动画	.animate-{name}	.animate-fadeIn	对应 @keyframes 名称
动画时长	.animate-duration-{ms}	.animate-duration-500	覆盖动画持续时间
动画延迟	.animate-delay-{ms}	.animate-delay-300	覆盖动画延迟
动画重复	.animate-{count}	.animate-infinite	控制迭代次数
缓动函数	.animate-ease-{type}	.animate-ease-bounce	切换时间曲线
Flex 布局	.flex / .items-{align} / .justify-{align}	.items-center	弹性布局对齐
Grid 布局	.grid-cols-{n} / .col-span-{n}	.grid-cols-3	网格列定义与跨度
间距	{direction}{axis}-{n}	.mt-4 .px-6 .gap-2	基于 4px 基准刻度
圆角	.rounded-{size}	.rounded-xl	多档圆角半径
阴影	.shadow-{level} / .shadow-{color}	.shadow-lg .shadow-primary	层级阴影与主题色阴影
文字	.text-{size} / .font-{weight}	.text-lg .font-bold	文字大小与字重
颜色	.text-{token} / .bg-{token}	.text-primary .bg-surface	引用主题令牌
布局辅助	.w-full .hidden .mx-auto	.mx-auto	尺寸、显隐、定位

断点前缀

采用 移动优先 策略，通过媒体查询前缀实现响应式：

前缀	最小宽度	典型设备
(无前缀)	0px	手机竖屏
sm:	640px	平板竖屏
md:	768px	平板横屏
lg:	1024px	桌面端

<!-- 手机 1 列 → 平板 2 列 → 桌面 3 列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="p-4 rounded-xl shadow animate-fadeIn">卡片 A</div>
  <div class="p-4 rounded-xl shadow animate-fadeIn animate-delay-100">卡片 B</div>
  <div class="p-4 rounded-xl shadow animate-fadeIn animate-delay-200">卡片 C</div>
</div>

---

动画目录

GlassUI 内置 10 条精心调校的 CSS3 动画，每条动画均由一个 @keyframes 定义与对应的 .animate-* 工具类组成。

类名	关键帧	效果描述	默认时长
.animate-fadeIn	fadeIn	透明度从 0 渐变至 1，元素平滑淡入可见	600ms
.animate-fadeOut	fadeOut	透明度从 1 渐变至 0，元素淡出消失	600ms
.animate-slideUp	slideUp	元素自下方 40px 处透明滑入，常用于内容入场	600ms
.animate-slideDown	slideDown	元素自上方 40px 处透明滑入，适合下拉面板展开	600ms
.animate-zoomIn	zoomIn	元素从 50% 缩放并带透明度放大至原始尺寸	600ms
.animate-bounce	bounce	元素在垂直方向多次反弹，模拟自由落体弹跳效果	1s
.animate-rotate	rotate	元素绕中心点匀速旋转 360 度，适合加载指示器	1s
.animate-pulse	pulse	元素以 1.08 倍缩放呼吸律动，默认无限循环	2s
.animate-shake	shake	元素水平方向左右快速抖动，用于错误提示反馈	800ms
.animate-flip	flip	元素绕 Y 轴翻转 180 度，可配合 backface-visibility 实现 3D 翻转卡片	800ms

动画微调工具类

所有动画均可通过以下工具类自由组合，微调播放参数：

时长

类名	时长
.animate-duration-300	300ms
.animate-duration-500	500ms
.animate-duration-700	700ms
.animate-duration-1000	1000ms
.animate-duration-1500	1500ms

延迟

类名	延迟
.animate-delay-100	100ms
.animate-delay-300	300ms
.animate-delay-500	500ms
.animate-delay-1000	1000ms

重复

类名	效果
.animate-once	播放 1 次
.animate-twice	播放 2 次
.animate-infinite	无限循环

缓动函数

类名	时间曲线
.animate-ease-linear	匀速直线
.animate-ease-in	缓入（慢起快收）
.animate-ease-out	缓出（快起慢收）
.animate-ease-in-out	缓入缓出
.animate-ease-bounce	弹性过冲

组合示例

<!-- 加载旋转指示器：匀速无限旋转 -->
<div class="animate-rotate animate-ease-linear animate-infinite animate-duration-1000">
  <svg><!-- spinner icon --></svg>
</div>

<!-- 错误提示：快速抖动，只播放一次 -->
<div class="animate-shake animate-duration-300 animate-once">
  <span class="text-error text-sm">请输入有效邮箱</span>
</div>

<!-- 3D 翻转卡片 -->
<div class="animate-flip animate-duration-1000 animate-ease-in-out">
  <div class="rounded-xl p-6 shadow-lg"
       style="backface-visibility: hidden;">
    <p class="text-white text-base">正面内容</p>
  </div>
</div>

<!-- 脉冲呼吸通知徽章 -->
<span class="animate-pulse text-error text-xs font-bold">3</span>

---

自定义主题

GlassUI 的所有视觉参数都通过 CSS 自定义属性（Design Tokens）暴露在 :root 上。只需覆盖这些令牌，即可实现整站主题切换。

默认令牌

:root {
  /* 主题色 */
  --primary: #7c3aed;
  --secondary: #ec4899;
  --accent: #f97316;

  /* 表面色 */
  --bg: #0f172a;
  --surface: #1e293b;

  /* 文字色 */
  --text: #f8fafc;
  --muted: #94a3b8;

  /* 语义色 */
  --success: #22c55e;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* 动画参数 */
  --anim-duration: 600ms;
  --anim-timing: cubic-bezier(0.22, 1, 0.36, 1);
  --anim-delay: 0ms;

  /* 间距刻度 */
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-4: 1rem;     /* 16px */
  --space-6: 2rem;     /* 32px */
  --space-8: 3rem;     /* 48px */
}

切换为亮色主题

:root {
  --bg: #ffffff;
  --surface: #f1f5f9;
  --text: #0f172a;
  --muted: #64748b;
}

/* 或使用 data-theme 属性选择器 */
[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f1f5f9;
  --text: #0f172a;
  --muted: #64748b;
}

配合 lib/css-vars.js 可实现 JavaScript 动态主题过渡，避免闪烁。

---

PostCSS 插件使用

GlassUI 通过 PostCSS 构建管线处理 CSS 源码，当前配置包含以下插件：

当前配置

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-preset-env': {
      stage: 1,
      features: {
        'nesting-rules': true,
        'custom-properties': true
      }
    }
  }
};

插件	作用
autoprefixer	根据 browserslist 自动添加浏览器前缀
postcss-preset-env	Stage 1 特性转译：嵌套规则、自定义属性降级

在你自己的项目中使用

如果你已经使用 PostCSS，可以在现有配置中直接引入 GlassUI 的源文件：

// 你的 postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},          // 可与 Tailwind 共存
    'postcss-preset-env': {
      stage: 1,
      features: {
        'nesting-rules': true
      }
    },
    autoprefixer: {}
  }
};

/* 你的样式入口 */
@import './node_modules/.../styles/utilities.css';
@import './node_modules/.../styles/animations.css';

/* 你的自定义样式 */
.my-glass-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

---

项目结构

aiboaibo.com/
├── styles/
│   ├── animations.css       # CSS3 动画关键帧库（10 条 @keyframes + 工具类）
│   ├── utilities.css         # 原子化工具类库（布局/间距/圆角/阴影/颜色）
│   └── README.md             # 样式模块详细文档
├── lib/
│   └── css-vars.js           # CSS 自定义属性动态切换辅助脚本
├── tests/
│   ├── animations.test.js    # 动画工具类断言测试
│   └── css-vars.test.js      # CSS 变量注入测试
├── scripts/
│   └── build-sitemap.js      # Sitemap 生成脚本
├── postcss.config.js         # PostCSS 插件配置
├── vitest.config.js          # Vitest 测试框架配置
├── .stylelintrc.json         # Stylelint 样式规范配置
├── .parcelrc                 # Parcel 打包器配置
├── package.json
├── pnpm-lock.yaml
├── CHANGELOG.md
├── CONTRIBUTING.md
└── LICENSE                   # BSD-3-Clause

---

开发工具链

工具	版本	用途
pnpm	9.x	包管理器，高效磁盘空间利用
PostCSS	—	CSS 转译管线（autoprefixer + preset-env）
Stylelint	16.x	CSS 代码质量与规范校验
Vitest	—	单元测试框架（jsdom 环境）
Parcel	—	零配置打包器，支持 CSS/JS 热更新
Node.js	>= 18.0.0	运行时环境

---

测试

本项目使用 Vitest 作为测试框架，测试用例覆盖 CSS 工具类存在性校验和 CSS 变量注入逻辑：

# 运行全部测试
pnpm test

# 运行测试并生成覆盖率报告
pnpm test -- --coverage

# 监听模式
pnpm test -- --watch

---

浏览器支持

GlassUI 基于 CSS3 现代特性构建，支持以下浏览器：

浏览器	最低版本	核心依赖特性
Chrome	76+	backdrop-filter, CSS Custom Properties, @keyframes
Firefox	103+	backdrop-filter 默认启用
Safari	9+	-webkit-backdrop-filter（autoprefixer 自动补全）
Edge	79+	Chromium 内核，与 Chrome 一致
iOS Safari	9+	-webkit-backdrop-filter
Opera	63+	Chromium 内核

backdrop-filter 是 Glassmorphism 视觉效果的基石。对于不支持该特性的浏览器，GlassUI 的动画与工具类仍可正常工作，只是毛玻璃模糊效果会降级为半透明背景。

---

为什么选择 GlassUI

对比维度	GlassUI	大型 CSS 框架	独立动画库
体积	< 4KB (gzip)	50KB - 3MB+	5KB - 30KB
运行时 JS	无	可选	通常需要
动画与布局一体化	是，统一命名体系	分离	仅动画
Glassmorphism 原生支持	是，令牌内置	需自行配置	无
主题切换	CSS 变量一行搞定	配置文件驱动	不涉及
无障碍（reduced-motion）	内建	视框架而定	部分支持
学习成本	极低，类名即文档	中等偏高	低
定制自由度	完全可控	受预设约束	仅动画层

---

参与贡献

GlassUI 是一个由社区驱动的开源项目，欢迎任何形式的贡献：

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/my-feature)
3. 提交更改 (git commit -m 'feat: add new animation')
4. 推送到分支 (git push origin feature/my-feature)
5. 发起 Pull Request

详细规范请参阅 CONTRIBUTING.md。

---

致谢

• 爱播爱播 — 项目发起组织，提供基础设施支持
• PostCSS 强大的 CSS 转译生态
• Vitest 极速的前端测试方案
• pnpm 高效的包管理方案

---

开源协议

本项目基于 BSD-3-Clause 协议开源。

BSD 3-Clause License

Copyright (c) 2026, CSS Art Studio
All rights reserved.

详见 LICENSE 文件。