console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>扫码效果案例</title>
<style> 
  *{
      margin: 0;
      padding: 0
  }
  .main{
      position: relative
  }
  .first{
      width: 100px;
      height: 200px;
      border: 1px solid #ccc
  }
  .sec{
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      /* height : 2px; */
      border-top: 2px solid red;
      animation: animate 2s linear infinite
  }

  @keyframes animate{
      0%{
          transform: translateY(0);
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          -ms-transform: translateY(0)
      }
      25%{
          transform: translateY(100px);
          -webkit-transform: translateY(100px);
          -moz-transform: translateY(100px);
          -ms-transform: translateY(100px)
      }
      50%{
          transform: translateY(200px);
          -webkit-transform: translateY(200px);
          -moz-transform: translateY(200px);
          -ms-transform: translateY(200px)
      }
      100%{
          transform: translateY(0);
          -webkit-transform: translateY(0);
          -moz-transform: translateY(0);
          -ms-transform: translateY(0)
      }

  }
</style>
</head>
<body>
  <div class="main">
      <div class="first"></div>
      <div class="sec"></div>
  </div>
</body>
</html>