纯css实现横向动态加载条

1.首先看一下效果

2.直接上代码

css 部分 （我这里用的scss）
.father:before {
          content : "";
          position: absolute;
          top     : 0;
          left    : 0;
          bottom  : 0;
          right   : 0;
          background-image:
            -webkit-gradient(linear, 0 0, 100% 100%,
              color-stop(.25, #FEDA5D), color-stop(.25, transparent),
              color-stop(.5, transparent), color-stop(.5, #FEDA5D),
              color-stop(.75, #FEDA5D), color-stop(.75, transparent),
              to(transparent));
          z-index          : 1;
          background-size  : 25px 25px;
          animation: move 1s linear infinite;
        }


        @-webkit-keyframes move {
          0% {
            background-position: 0 0;
          }

          100% {
            background-position: 25px 25px;
          }
        }
        
  HTML部分
  <div class="father"><div>

3.我这里颜色用的是 #FEDA5D 和 透明色 大家可以根据自己业务需求更改

4.顺便 说一下 css 之前遇到的问题及解决方案

   1、css 采用 position 用 left/right 实现横向移动结果动画卡壳
   
   解决方案：采用 transform:translate(xx) 就可以解决卡顿问题
   
   
   2、使用 transform:rotate(90deg) 带来的边框阴影
   
   解决方案:  transform:rotate(90deg) translateZ(0); 加 translateZ(0)即可解决