1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>纯css动画实现轮播图展示</title> 6 <link rel="stylesheet" charset="utf-8" href="style.css" /> 7 <style> 8 @keyframes move{ 9 0%{ 10 transform:translateX(0%); 11 } 12 20%{ 13 transform:translateX(0%); 14 } 15 25%{ 16 transform:translateX(-500px); 17 } 18 45%{ 19 transform:translateX(-500px); 20 } 21 50%{ 22 transform:translateX(-1000px); 23 } 24 70%{ 25 transform:translateX(-1000px); 26 } 27 75%{ 28 transform:translateX(-1500px); 29 } 30 95%{ 31 transform:translateX(-1500px); 32 } 33 100%{ 34 transform:translateX(-2000px); 35 } 36 37 } 38 .wrap{ 39 width:500px; height:320px; 40 position:relative; margin:50px auto; 41 border:5px solid #f00; 42 overflow:hidden; 43 } 44 ul,li{margin:0; padding:0; list-style:none;} 45 img{vertical-align: top; border:none;} 46 .list{width:500%; animation: move 7s linear infinite} 47 .list li{float:left; width:500px; height:320px;} 48 .list img{width:100%; height:100%;} 49 </style> 50 51 </head> 52 <body> 53 <!-- <div id="boxId" class="boxClass"> 54 <canvas id = "canvasId" width = 500 height = 500></canvas> 55 </div> 56 <script type = "text/javascript" src = "main.js" ></script> --> 57 58 <div class="wrap"> 59 <ul class="list"> 60 <li><img src="0-1.png" alt=""/></li> 61 <li><img src="0-3.png" alt=""/></li> 62 <li><img src="0-4.png" alt=""/></li> 63 <li><img src="0-6.png" alt=""/></li> 64 <li><img src="0-7.png" alt=""/></li> 65 </ul> 66 </div> 67 </body> 68 </html>