<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } ul { list-style: none; } nav { width: 882px; height: 86px; border: 1px solid red; margin: 50px auto; overflow: hidden; } nav ul li { float: left; } nav ul { width: 200%; animation: moving 2s linear infinite; } @keyframes moving { from { transform: translateX(0); } to { transform: translateX(-882px); } } nav:hover ul { animation-play-state: paused; } } </style> </head> <body> <nav> <ul> <li><img src="images/nav1.jpg"></li> <li><img src="images/nav2.jpg"></li> <li><img src="images/nav3.jpg"></li> <li><img src="images/nav4.jpg"></li> <li><img src="images/nav5.jpg"></li> <li><img src="images/nav6.jpg"></li> <li><img src="images/nav7.jpg"></li> <li><img src="images/nav1.jpg"></li> <li><img src="images/nav2.jpg"></li> <li><img src="images/nav3.jpg"></li> <li><img src="images/nav4.jpg"></li> <li><img src="images/nav5.jpg"></li> <li><img src="images/nav6.jpg"></li> <li><img src="images/nav7.jpg"></li> </ul> </nav> </body> </html>
运行结果：