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>
