在本教程中，我们将使用 CSS 创建一个骨架屏加载动画效果。当页面加载数据时，骨架屏提供虚拟的布局效果。可以让用户知道内容正在加载中，并且与整页加载动画不同，可以使用此技术逐渐加载页面的各个元素。

CSS骨架屏

今天我们将为视频卡组件创建一个骨架屏，如下所示：

对于 HTML，我们只需要单个空 div 元素：

<div class="video"></div>

现在开始编写CSS，我们将使用 :empty 伪类，它只会在视频 div 为空（包括空白）时显示骨架屏，并在注入内容后消失。开发人员通常使用切换 class 来实现相同的效果，但这种解决方案要更加简单：

.video {
    width: 320px;
    height: 250px; 
}
.video:empty {
    cursor: progress; 
}

视频卡组件包含 4 个元素，一个半透明的叠加层，我们将对其进行动画处理以提供正在获取数据的错觉，然后是缩略图、头像和标题文本的占位布局。这 4 个元素是使用背景 CSS 渐变创建的。

.video:empty {
  cursor: progress;
  background:
    linear-gradient(0.25turn, transparent, #fff, transparent),
    linear-gradient(#eee, #eee),
    radial-gradient(40px circle at 20px 20px, #EEE 50%, transparent 51%),
    linear-gradient(#eee, #eee);
  background-repeat: no-repeat;
  background-size: 320px 250px,320px 200px, 40px 40px, 270px 40px;
  background-position: -320px 0, 0 0, 0 210px, 50px 210px;
  animation: loading 1.5s infinite;
}

loading 动画:

@keyframes loading {
  to {
    background-position: 320px 0, 0 0, 0 210px, 50px 210px;
  }
}

VUE示例

苹果手机兼容处理

部分苹果手机，流光颜色不对，可以替换以下代码。

linear-gradient(0.25turn, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0))