骨架屏动画

知识点：css动画、css渐变色、css属性background-size、background-position

参考了其它文章，自己记录一下一个简单的骨架屏动画实现以及原理是啥

我们先准备一个div盒子

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 300px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

给这个盒子添加渐变的背景色
解释渐变背景

background-image: linear-gradient(to right, #000, #fff )
background-image: linear-gradient(to top, #000, #fff,#ccc)

如上所示，背景渐变用linear-gradient这个css函数，第一个参数接收一个方向，后面接n个参数，表示从哪个颜色渐变到哪个颜色，各个颜色所占比例被均分，如果希望在某个位置指定出现某个颜色，可以在颜色后面加上百分比数字，如
background-image: linear-gradient(to right, #6dc41c, #000 25%, #ccc 50%)
以上表示从左往右渐变，从#6dc41c开始慢慢渐变，在25%的位置时渐变成#000，再慢慢渐变，在50%的时候渐变到#ccc，之后就都是#ccc了。

linear-gradient函数接收的第一个参数也可以是角度值，linear-gradient(xdeg,颜色...)，想象初始的时候有一个向上的箭头，也就是0deg，代表着从下往上渐变，然后这个箭头顺时针开始旋转x°，就变成了xdeg，渐变的方向也是箭头所指的方向，到90deg的时候，就代表着从左往右开始渐变了，实际使用的时候，角度用的要更多一点。
总结：
background-image: linear-gradient() 第一个接收的参数可选值:(to top、to right、to left、to bottom、xdeg)，其实这4个值也就对应着角度的0deg、90deg、270deg、180deg。后面再跟n个参数，参数值是颜色，颜色后面可以跟具体这个颜色出现在的百分比位置。我们给我们做的这个盒子添加渐变色：
background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)
拉伸渐变背景 background-size属性可以设置背景的大小，可以设置cover，contain等值，但我们需要自定义宽高大小，它可以设置两个值，第一个值表示宽度，第二个值表示高度，可以用px等计量值，也可以用百分比数字，这里因为要拉伸，所以用百分比数字，我们将宽度拉宽到原来的两倍
background-size: 200% 100%;
由于宽度拉伸到了原来的两倍，那么显示肯定就显示不全整个背景，我们只需要再通过让背景不断地移动就可以实现效果了
背景位置 background-position属性可以设置盒子背景的位置，设置两个值，第一个值表示背景在水平方向的位置，可选值(left,center,right,npx,%n)，left,center,right如单词意义一样，表示在水平的左侧，中间，右侧，npx与%n表示向右边移动多少px或者移动多少百分比的距离，也可以理解为距离左侧多少px的距离或者距离左侧多少百分比的距离。第二个值表示背景在垂直方向的位置，可选值有(top,center,bottom,npx,%n)，也和水平偏移类似，top，center，bottom如单词意思一样，npx，%n表示向下移动多少px或者向下移动百分之多少。如果只写一个值，那么另一个值默认为center。
使背景移动就通过css动画不断修改background-position的位移，使得背景移动，就可以实现效果了，这里我们设置背景水平偏移的初始值为0，暂不偏移：
background-position: 0 center;
css动画
这个我比较熟，就不解释css动画了，我们让背景的position从左往右移，初始位置在偏移为0的位置，移动到背景宽度最大的地方，再重复这个移动，因为我们没有设置background-repeat:no-repeat，所以能看到一直有背景在，不会出现没有背景的真空期

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

最后的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <style>
    @keyframes gradient {
        0% {
            background-position: 0 center;
        }
        100% {
            background-position: 200% center;
        }
    }
    .box {
      width: 300px;
      height: 100px;
      background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
      background-size: 200% 100%;
      background-position: 0 0;
      animation: gradient 2s linear infinite;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

这样，我们就实现了一个简单的骨架屏动画的效果了

骨架屏动画的实现

骨架屏动画