css3实现无缝滚动效果

轮播图动画效果实现

最新推荐文章于 2025-01-08 10:21:39 发布

原创最新推荐文章于 2025-01-08 10:21:39 发布 · 705 阅读

5 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

8 篇文章

订阅专栏

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>

效果图：