UnoCSS ¶

一.UnoCSS 常用属性简写对照表（按功能分类） ¶

覆盖 90% 实战使用场景
适用：UnoCSS preset-uno
可直接用 MacDown / Typora / Obsidian 打开

一、Display / 布局 ¶

二、Flex（高频） ¶

方向 ¶

主轴对齐 ¶

交叉轴 ¶

Flex 子项 ¶

三、Grid ¶

四、尺寸 Size ¶

宽高 ¶

最小 / 最大 ¶

五、Spacing（最常用） ¶

1 = 0.25rem

Padding ¶

Margin ¶

六、字体 Font ¶

字号 ¶

字重 ¶

七、文本 Text ¶

八、颜色 Color ¶

文本 ¶

背景 ¶

九、Border ¶

十、圆角 Radius ¶

十一、Shadow ¶

十二、Position ¶

十三、Transform ¶

十四、交互 ¶

十五、状态修饰符 ¶

hover:
active:
focus:
disabled:
dark:

十六、开发必背 20 个 ¶

flex flex-col justify-between items-center
w-full h-full
p-4 px-4 py-2
text-sm text-gray-600
bg-white rounded-lg
border border-gray-200
shadow-md
relative absolute
cursor-pointer
hover:bg-gray-100

二.UnoCSS 新手宝典（保姆级速查表） ¶

⚡ 适合新手与前端开发者，分类详尽，包含类名、CSS、中文解释、示例，查表即用。

1. Display（显示类型） ¶

2. Flex（弹性盒） ¶

3. Grid（网格布局） ¶

4. Size（宽高尺寸） ¶

5. Position（定位） ¶

6. Margin / Padding（外边距 / 内边距） ¶

7. Transform（变换） ¶

8. Shadow（阴影） ¶

9. Colors（颜色类） ¶

10. Typography（文本 / 字体） ¶

11. Overflow（溢出） ¶

12. Cursor（鼠标样式） ¶

13. Interaction / State（交互状态） ¶

14. Border（边框类） ¶

15. 开发必背 / 高频 ¶

16. Vant UI 相关常用类 ¶

💡 说明：

1. 每类表格都包含类名、CSS、中文解释、示例。
2. 可直接拷贝类名到项目使用。
3. 适用于 PWA、Vue、H5 项目，配合 UnoCSS 高度灵活。
4. 新手可以按模块查找使用，无需记忆复杂 CSS。

三.UnoCSS 完整属性简写对照表 ¶

UnoCSS 是一款原子化 CSS 工具，类似 Tailwind，但可高度自定义。以下对照表按照功能分类，列出常用类名、对应 CSS、中文意思，并给出示例，方便新手快速查阅。

1. 布局 (Layout) ¶

Flex 布局 ¶

2. 文本 (Typography) ¶

3. 背景与颜色 (Background & Color) ¶

4. 边框与圆角 (Border & Radius) ¶

5. 其他常用 ¶

使用建议 ¶

1. 类名顺序：UnoCSS 按写入顺序覆盖，所以 mx-auto 放后通常覆盖前面宽度设置。
2. 响应式：可使用前缀 sm:, md:, lg:, xl: 来设置不同屏幕下的样式。
3. 原子化组合：尽量将常用组合封装成组件，提高复用性。

UnoCSS 常用动画速查表（保姆级） ¶

适用技术栈：Vue3 / Vite / UnoCSS / Vant / H5 / PWA
目标：新手直接查 → 直接用 → 不踩坑

一、动画基础认知（先看） ¶

animation 和 transition 区别 ¶

二、内置动画（开箱即用） ¶

1️⃣ 基础动画类 ¶

<div class="w10 h10 bg-blue-500 rounded-full animate-spin"></div>

三、动画参数控制（必背） ¶

⏱ 持续时间 ¶

⏳ 延迟 ¶

🔁 次数 ¶

四、缓动函数（动画质感核心） ¶

五、任意动画（🔥UnoCSS 核心能力） ¶

1️⃣ 任意 animation ¶

<div class="animate-[spin_2s_linear_infinite]"></div>

等价于：

animation: spin 2s linear infinite;

2️⃣ 常用任意动画速查 ¶

六、常见 Keyframes 模板（直接抄） ¶

📌 uno.config.ts ¶

export default defineConfig({
  theme: {
    keyframes: {
      'fade-in': {
        '0%': { opacity: 0 },
        '100%': { opacity: 1 }
      },
      'slide-up': {
        '0%': { transform: 'translateY(20px)', opacity: 0 },
        '100%': { transform: 'translateY(0)', opacity: 1 }
      },
      'shake': {
        '0%,100%': { transform: 'translateX(0)' },
        '25%': { transform: 'translateX(-5px)' },
        '75%': { transform: 'translateX(5px)' }
      }
    }
  }
})

七、动画 + 状态修饰符（高频） ¶

<button class="hover:animate-bounce">按钮</button>

八、动画 + Transition（交互必备） ¶

<div class="transition-all duration-300 hover:scale-110 hover:rotate-3"></div>

九、Vue 中动态动画（不踩坑） ¶

✅ 推荐方式 ¶

<div :style="{ animation: `spin ${duration}s linear infinite` }"></div>

❌ 错误方式 ¶

<!-- 会被 UnoCSS 构建期忽略 -->
<div :class="`rotate-${angle}`"></div>

十、动画速查口诀（记住） ¶

静态用类名
动态用任意值
再不行用 style

十一、推荐使用场景 ¶

十二、你下一步可以做什么 ¶

• 页面切换动画模板
• Vant Dialog / Toast 动效封装
• PWA 更新动画 UX

这份文档你可以直接存为 unocss-animation.md 长期查。