效果展示
走马灯效果
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul li { list-style: none; } div { width: 600px; height: 112px; margin: 200px auto; border: 1px solid black; overflow: hidden; } ul { width: 2000px; height: 270px; animation: move 10s infinite linear; } li { float: left; width: 200px; height: 270px; } img { width: 200px; } /* 制作动画效果 */ @keyframes move { to { transform: translateX(-1400px); } } div:hover ul { animation-play-state: paused; } </style> </head> <body> <div> <ul> <li><img src="./images/1.jpg" alt=""></li> <li><img src="./images/2.jpg" alt=""></li> <li><img src="./images/3.jpg" alt=""></li> <li><img src="./images/4.jpg" alt=""></li> <li><img src="./images/5.jpg" alt=""></li> <li><img src="./images/6.jpg" alt=""></li> <li><img src="./images/7.jpg" alt=""></li> <li><img src="./images/1.jpg" alt=""></li> <li><img src="./images/2.jpg" alt=""></li> <li><img src="./images/3.jpg" alt=""></li> </ul> </div> </body> </html>
注意点就是制作无间隙动画的时候需要将开头的部分在结尾处也添加一下，这样子就可以制作出无间隙的走马灯。
