CSS如何制作骨架屏？CSS加载占位动画技巧详解

骨架屏是在页面真实内容加载完成前，用占位图形展示页面大致结构的加载方案。使用CSS可以低成本实现骨架屏与加载动画，不需要依赖JavaScript即可完成基础的视觉效果。

一、骨架屏的基本结构

骨架屏通常由若干个占位块组成，这些块使用灰色背景，并通过CSS控制尺寸和间距，模拟标题、图片、段落等区域。下面是一个简单的HTML结构：

<div class="skeleton">
  <div class="skeleton-img"></div>
  <div class="skeleton-line"></div>
  <div class="skeleton-line short"></div>
</div>

二、使用CSS绘制占位块

通过background-color设置基础灰色，再用border-radius让块看起来更自然。示例样式如下：

.skeleton-img {
  width: 100%;
  height: 200px;
  background-color: #e0e0e0;
  border-radius: 8px;
  margin-bottom: 12px;
}

.skeleton-line {
  height: 16px;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 10px;
}

.skeleton-line.short {
  width: 60%;
}

三、CSS加载占位动画技巧

最常见的骨架屏动画是闪烁效果，利用linear-gradient配合background-position移动，再用@keyframes循环播放，形成光带扫过的感觉。

.skeleton-img,
.skeleton-line {
  background-image: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #f0f0f0 50%,
    #e0e0e0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

1. 动画原理说明

background-size设为200%让渐变背景比元素宽一倍，动画改变background-position使亮色区域不断平移，从而产生加载中的动态反馈。

2. 减少性能开销

• 只对background-position做动画，避免触发重排
• 使用will-change: background-position提示浏览器优化
• 动画时间控制在1到2秒，过长会让用户焦虑

四、结合布局组件使用

在列表页中，可以用flex或grid排布多个骨架项。以下代码展示一个横向卡片骨架：

<div class="card-skeleton">
  <div class="sk-avatar"></div>
  <div class="sk-body">
    <div class="skeleton-line"></div>
    <div class="skeleton-line short"></div>
  </div>
</div>

.card-skeleton {
  display: flex;
  gap: 12px;
  padding: 12px;
}

.sk-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #e0e0e0;
}

五、小结

用CSS制作骨架屏核心在于灰色占位元素加渐变动画。掌握linear-gradient与keyframes的组合，就能实现流畅的加载占位效果。实际项目中可将骨架屏封装为组件，在数据返回后替换为真实内容。

CSS骨架屏skeleton_screen修改时间：2026-07-27 10:45:21