骨架屏效果 (Skeleton Loading)

核心原理

骨架屏（Skeleton Screen）是在数据加载完成前，展示给用户的一个灰色占位轮廓。为了让它看起来是“加载中”的状态，通常会加上一个扫光动画（Shimmer Effect）。

这个动画的核心系统是：

背景：利用 linear-gradient 创建一个灰色的底色，中间穿插一道浅色的亮光。
尺寸：将 background-size 设置得比容器宽（通常是 200% 或更大），这样亮光部分才能在移动中完整的扫过容器。
动画：改变 background-position，让背景图从左向右移动。

实现步骤

通常创建一个通用的 .skeleton 类，可以应用在任何形状的元素上。

主题色适配

为了适配深色模式，可以将颜色提取为 CSS 变量。

:root {
  --skeleton-base: #f0f2f5;
  --skeleton-shine: #e6e8eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --skeleton-base: #1a1a1a;
    --skeleton-shine: #2a2a2a;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-shine) 37%,
    var(--skeleton-base) 63%
  );
}

`:empty` 伪类自动应用

可以利用 :empty 伪类，当元素内没有内容时自动应用骨架样式，内容加载后自动移除。

.card-title:empty {
  @extend .skeleton; /* 预处理器用法，或直接添加 class */
}