几行 CSS 代码实现骨架屏

就是利用 CSS 的背景渐变属性 background-image，不过需要注意一下设置 background-position 属性的坑。

它是根据背景图宽度和容器宽度的差值来计算的

HTML

<div class="box"></div>

CSS

.box {
	width: 200px;
	height: 200px;
	/* 默认角度是 0 度，垂直向上。角度增大方向为顺时针。 */
	background-image: linear-gradient(90deg, red 23%, blue 45%, red 75%);
	/* 注意背景图片的 position，是根据背景图宽度和容器宽度的差值来计算的。 */
	background-position: 0 0;
	/* 大小是根据父容器来计算的 */
	background-size: 400% 100%;
	/* 禁止背景图片重复 */
	background-repeat: no-repeat;
	animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}