vue 图片扫描效果

 <div class="img-card">
        <div :class="['scan-contain', { active: loadingStatus }]"></div>
        <img :src="imageUrl" class="img" />
      </div>

.img-card {
    position: relative;
    padding: $basePadding * 0.5 $basePadding;
    border-right: $baseBorder;
    overflow: hidden;
    .scan-contain {
      position: absolute;
      left: 0;
      right: 0;
      top: -100px;
      height: 100px;
      background: linear-gradient(
        rgba($color: $baseColor, $alpha: 0),
        rgba($color: $baseColor, $alpha: 0.7)
      );
      &.active {
        animation: moveScan 1.5s infinite;
      }
    }
  }

  @keyframes moveScan {
    from {
      top: -100px;
    }
    to {
      top: 100%;
    }
  }