css实现直线拉伸-526互联

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>直线拉伸示例</title>  
  <style>  
    .line {  
      height: 2px;  
      background-color: black;  
      animation: stretch-line 1s ease-in-out forwards;  
    }  
    @keyframes stretch-line {  
      0% {  
        width: 0;  
      }  
      100% {  
        width: 200px; /* 指定直线长度 */  
      }  
    }  
  </style>  
</head>  
<body>  
  <div class="line"></div>  
</body>  
</html>