无缝滚动效果实现-优快云博客

本文介绍了一个使用HTML和CSS实现的无缝滚动效果。通过定义特定的样式和动画，可以使一系列图片在网页上连续平滑地滚动展示。当鼠标悬停在滚动区域时，滚动会暂停。

 1 <title>无缝滚动</title>
 2 <link href="../CSS/Untitled-2.css" rel="stylesheet" type="text/css">
 3 </head>
 4 
 5 <body>
 6 <div id="gundong">
 7 <ul>
 8 <li><img src="../案例/images/nav1.jpg"></li>
 9 <li><img src="../案例/images/nav2.jpg"></li>
10 <li><img src="../案例/images/nav3.jpg"></li>
11 <li><img src="../案例/images/nav4.jpg"></li>
12 <li><img src="../案例/images/nav5.jpg"></li>
13 <li><img src="../案例/images/nav6.jpg"></li>
14 <li><img src="../案例/images/nav7.jpg"></li>
15 <li><img src="../案例/images/nav1.jpg"></li>
16 <li><img src="../案例/images/nav2.jpg"></li>
17 <li><img src="../案例/images/nav3.jpg"></li>
18 <li><img src="../案例/images/nav4.jpg"></li>
19 <li><img src="../案例/images/nav5.jpg"></li>
20 <li><img src="../案例/images/nav6.jpg"></li>
21 <li><img src="../案例/images/nav7.jpg"></li>
22 </ul>
23 </div>
24 </body>
25 </html>
26 /* css代码 */
27 *{margin:0;padding:0;}
28 #gundong{width:882px; height:86px; border:1px solid #999; margin:50px auto; overflow:hidden;}
29 #gundong ul{list-style:none; animation:moving 5s  linear infinite; width:200%;}
30 #gundong ul li{float:left;}
31 #gundong ul{animation:moving 5s linear infinite;}
32 #gundong:hover ul{ animation-play-state:paused;}
33 @keyframes moving {
34     from {
35     transform:translateX(0);
36     }
37     to { 
38     transform:translateX(-882px);
39     }
40 }