用动画实现轮播效果（animation）

  <style>

    
     .carousel {
    
         width: 520px;
    
         height: 280px;
    
         border: 3px solid #000;
    
         overflow: hidden;
    
         position: relative;
    
         margin: 50px auto;
    
     }
    
  
    
     .carousel ul {
    
         list-style: none;
    
         margin: 0;
    
         padding: 0;
    
         position: absolute;
    
         top: 0;
    
         left: 0;
    
         width: 2080px;
    
         height: 280px;
    
         /* 使用动画 */
    
         animation: lunbo 6s infinite;
    
     }
    
  
    
     .carousel ul li {
    
         float: left;
    
     }
    
  
    
     /* 清除浮动 */
    
     .carousel ul:after {
    
         content: '';
    
         display: block;
    
         clear: both;
    
     }
    
  
    
     /* 给动画起名字 */
    
     @keyframes lunbo {
    
         0% {
    
             left: 0;
    
         }
    
  
    
         33% {
    
             left: -520px;
    
         }
    
  
    
         66% {
    
             left: -1040px;
    
         }
    
  
    
         100% {
    
             left: -1560px;
    
         }
    
     }
    
 </style>

  <div class="carousel">

    
     <ul>
    
         <li>
    
             <a href="">
    
                 <img src="https://img.alicdn.com/imgextra/i4/6000000004570/O1CN01QuyOrx1jd6lJ8HB5j_!!6000000004570-0-octopus.jpg"
    
                     alt="">
    
             </a>
    
         </li>
    
         <li>
    
             <a href="">
    
                 <img src="https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg" alt="">
    
             </a>
    
         </li>
    
         <li>
    
             <a href="">
    
                 <img src="https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg" alt="">
    
             </a>
    
         </li>
    
         <li>
    
             <a href="">
    
                 <img src="https://img.alicdn.com/imgextra/i4/6000000004570/O1CN01QuyOrx1jd6lJ8HB5j_!!6000000004570-0-octopus.jpg"
    
                     alt="">
    
             </a>
    
         </li>
    
     </ul>
    
  
    
     </div>