CSS 如何实现骨架屏加载？

Question

CSS 如何实现骨架屏加载？

仓乃文 · Accepted Answer

骨架屏通过灰色占位块 + shimmer 动画模拟内容加载中的视觉效果，提升用户感知的加载速度。

```css
.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-text:last-child {
  width: 60%;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-image {
  width: 100%;
  height: 200px;
}
```

补充说明：
- shimmer 动画通过移动渐变背景实现闪光扫过效果
- 不同形状的骨架块模拟真实内容布局
- 最后一行宽度设为 60% 更自然
- 适合列表加载、卡片加载、详情页加载等场景