1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <style>
7 @keyframes move
8 {
9 0%
10 {
11 transform:translateX(0px);
12 }
13 100%
14 {
15
transform:translateX(-500px);
16 }
17 }
18 ul{margin:0;padding:0; list-style:none;}
19 .picTab{width:500px;height:100px;border:2px solid #000; margin:50px auto;
20
21 overflow:hidden;}
22 .picTab ul{width:1000px;height:100px; animation:move 5s linear infinite;}
23 .picTab li
24
25 {margin:1px;float:left;width:98px;height:98px;background:#000;color:#fff;
26
27 font:50px/98px "宋体"; text-align:center;}
28 .picTab:hover ul{ animation-play-state:paused;}
29 </style>
30 </head>
31 <body>
32 <section class="picTab">
33 <ul>
34 <li>1</li>
35 <li>2</li>
36 <li>3</li>
37 <li>4</li>
38 <li>5</li>
39 <li>1</li>
40 <li>2</li>
41 <li>3</li>
42 <li>4</li>
43 <li>5</li>
44 </ul>
45 </section>
46 </body>
47 </html>效果图：
