骨架屏示例展示

Skeleton Screen Loading Animation

示例 1: 基础内容卡片

示例 2: 用户信息卡片

示例 3: 文章列表

示例 4: 产品列表（电商场景）

骨架屏加载原理

✓ 第 1 阶段（0-2秒）：显示灰色占位块（骨架屏），用户看到页面结构

✓ 第 2 阶段（2-3秒）：渐显真实内容，淡出骨架屏

✓ 第 3 阶段（3秒后）：完全显示真实内容，加载完成

技术实现说明

1. CSS 动画：使用 background-size: 200% 100% 和 animation 实现左右移动的渐变效果

2. JavaScript 控制：通过 setTimeout 模拟异步加载，2秒后替换为真实内容

3. Tailwind CSS：利用 Tailwind 的 transition 类实现平滑过渡动画

4. Unsplash 图片：所有真实图片均来自 Unsplash 免费图片库