图片扫描动画（css）

 

<div class="img-box">
<div class="qr-scanner"></div>
</div>

  .img-box {
          height: 100%;
          overflow: hidden;
          position: relative;
          .qr-scanner {
            position: absolute;
            height: calc(100% - 2px);
            width: 100%;
            background: linear-gradient(
              180deg,
              rgba(0, 255, 51, 0) 43%,
              rgb(255, 106, 0) 211%
            );
            border-bottom: 3px solid rgb(255, 106, 0);
            transform: translateY(-100%);
            animation: radar-beam 2s infinite;
            animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
            animation-delay: 1.4s;
          }
      }

  @keyframes radar-beam {
    0% {
      transform: translateY(-100%);
    }

    100% {
      transform: translateY(0);
    }
  }