纯css 实现 横向减头加载（背景图片可替换）

1.首先上效果图

2.上代码

   css代码(我这里用的还是scss)
    .arrow-pic {
            position        : absolute;
            width           : 52px;
            height          : 14px;
            background-image: linear-gradient(0grad, #75C603, #75C603);
            animation       : move-arrows 1s linear infinite;
            transform-origin: left;
            mask-image      : url('图片base64');
            mask-size       : contain;
            right: -52px;
            top: 10.5px;
          }

          @keyframes move-arrows {
            0% {
              mask-position: 0 0;
            }

            100% {
              mask-position: 70px 0px;
            }
          }
          
          
          
HTML
      <div class="arrow-pic"></div>

3.图片中的箭头可以换成任何图片或svg 大家根据业务需求自行更换