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>
