css 纯css轮播图示例

 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>
css 纯css轮播图 示例

猜你喜欢

css 纯css轮播图示例
