纯 CSS 实现骨架屏

骨架屏在数据加载前，优先展示页面的大体结构，通常用灰色的明暗变化的块，提高用户体验

纯 CSS 骨架屏适合Ajax或Fecth请求数据，填充模板引擎渲染的场景。如果请求的是页面本身，那么预渲染生成骨架图，是更好的方式

用子绝父相的定位方式，在需要显示为骨架屏的元素内，放置两个伪元素

• 一个撑满父容器，表示未填充数据前的元素
• 一个填充倾斜的渐变条纹，移动条纹位置，模拟进度条动画

<style>
@keyframes skeleton-anime {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.skeleton {
  position: relative;
  overflow: hidden;
}
.skeleton::before, .skeleton::after {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #efefef;
}
.skeleton::after {
  background-image: linear-gradient(-75deg, #efefef, white 30%, #efefef);
  animation: skeleton-anime 1s infinite;
  opacity: .3;
}
.avater {
  float: left;
  margin-right: 2px;
  width: 100px;
  height: 100px;
}
.title, .des {
  height: 48px;
  margin-top: 2px;
}
</style>
<div class="avater skeleton"></div>
<div class="title skeleton"></div>
<div class="des skeleton"></div>