骨架屏与其CSS滑块动画骨架屏及其样式优化的恩怨情仇0.使用场景1.温习CSS相关属性（1）animation （2）

本文已参与[新人创作礼]活动，一起开启掘金创作之路

0.使用场景

   骨架屏：在未获取数据时候（加载页面时）使用公共组件的样式，当获取到数组数据时候，即数组有长度时，使用原样式

      使用公共组件XtxSkeleton可传入宽度和高度来设置滑块大小及背景显示（背景就需要我们使用CSS滑块动画处理了）

1.温习CSS相关属性

（1）animation

   animation:动画名 动画时间 动画延迟时间 动画曲线 动画次数

（2）transform 位移（默认最终结束会回到最初，添加forwards可不返回）

  <style>
    div {
      width: 10px;
      height: 20px;
      background-color: pink;
      margin: 200px auto;
      animation: move 1s 2s linear forwards;
    }

    @keyframes move {
      0% {}

      30% {}

      60% {}

      100% {
        transform: translate(200px, 100px); 
        width: 200px;
        height: 200px;

      }
    }
  </style>

效果

初始

最终

（3）rotate 旋转

      100% {
        transform: rotate(270deg) ;
        width: 200px;
        height: 200px;

      }

效果

初始

最终

（4）skew 倾斜

      100% {
        transform: rotate(270deg) skew(60deg) ;
        width: 200px;
        height: 200px;

      }

初始

最终

（5）scale 缩放

      100% {
        transform:rotate(360deg) skew(60deg)  scale(2);
        width: 200px;
        height: 200px;

      }

初始

最终

2.最终代码

 <style>
    .box {
      width: 200px;
      height: 200px;
      position: relative;
      overflow: hidden;
    }

    .box::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50px;
      width: 10%;
      height: 100%;
      background: linear-gradient(rgba(255, 255, 255,0),rgba(255, 255, 255,.5),rgba(255, 255, 255,0));
      transform: skew(-30deg);
      animation: move .5s linear infinite;
    }

    .container {
      width: 100%;
      height: 100%;
      background-color: red;
    }

    @keyframes move {
      0% {}

      100% {
        transform: skew(-30deg) translate(200px);
      }
    }
  </style>
</head>

<body>

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

</body>

3.效果图

骨架屏效果