纯css3代码写无缝滚动效果

浏览数：33 / 时间：2015年06月09日

主要用到css3中的动画 @keyframes， animation。

布局是外层一个div宽固定，然后overflow hidden 绝对定位，里面的ul 固定定位。通过对ul添加动画来实现效果。具体代码如下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6 </head>
 7 <style type="text/css">
 8   *{margin: 0;padding: 0;}
 9   ul li{list-style: none;}
10   .banner{width: 100%;height: 568px;overflow: hidden;position: relative;}
11   .banner ul{
12     width: 500%;
13     position: absolute;
14     left: 0;
15     top: 0;
16     height: 568px;
17     -webkit-animation:slide 10s linear infinite;
18   }
19   .banner ul li{
20     float: left;
21     width: 20%;
22     height: 568px;
23   }
24   .banner ul li:nth-child(1){background:url(img/1.jpg) center; }
25   .banner ul li:nth-child(2){background:url(img/2.jpg) center; }
26   .banner ul li:nth-child(3){background:url(img/3.jpg) center; }
27   .banner ul li:nth-child(4){background:url(img/4.jpg) center; }
28   .banner ul li:nth-child(5){background:url(img/5.jpg) center; }
29   @-webkit-keyframes slide{
30     0%{left: 0;}
31     20%{left: 0;}
32     21%{left: -100%;}
33     40%{left: -100%;}
34     41%{left: -200%;}
35     60%{left: -200%;}
36     61%{left: -300%;}
37     80%{left: -300%;}
38     81%{left: -400%;}
39     100%{left: -400%;}
40   }
41   .banner:hover ul{-webkit-animation-play-state:paused;}
42 </style>
43 <body>
44   <div class="banner">
45     <ul>
46       <li></li>
47       <li></li>
48       <li></li>
49       <li></li>
50       <li></li>
51     </ul>
52   </div>
53 </body>
54 </html>