<!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> body { margin: 0; padding: 0; background-color: #f7f7f7; } .box { width: 880px; height: 85px; margin: 200px auto; position: relative; overflow: hidden; border: 1px solid #ccc; } ul { width: 2250px; height: 85px; padding: 0; margin: 0; list-style: none; position: absolute; left: 0; animation: move 7s infinite alternate; } ul:hover { /* 控制动画执行状态 paused：暂停 running: 播放 */ animation-play-state: paused; } li { float: left; } li img { width: 150px; height: 100%; } @keyframes move { 0% { transform: translateX(0px); } 100% { transform: translateX(-1370px); } } </style> </head> <body> <div class="box"> <ul> <li><img src="DemoMaterial/animation/bg1.jpg"></li> <li><img src="DemoMaterial/animation/bg2.jpg"></li> <li><img src="DemoMaterial/animation/bg3.jpg"></li> <li><img src="DemoMaterial/animation/bg4.jpg"></li> <li><img src="DemoMaterial/animation/bg5.jpg"></li> <li><img src="DemoMaterial/animation/bg1.jpg"></li> <li><img src="DemoMaterial/animation/bg2.jpg"></li> <li><img src="DemoMaterial/animation/bg3.jpg"></li> <li><img src="DemoMaterial/animation/bg4.jpg"></li> <li><img src="DemoMaterial/animation/bg5.jpg"></li> <li><img src="DemoMaterial/animation/bg1.jpg"></li> <li><img src="DemoMaterial/animation/bg2.jpg"></li> <li><img src="DemoMaterial/animation/bg3.jpg"></li> <li><img src="DemoMaterial/animation/bg4.jpg"></li> <li><img src="DemoMaterial/animation/bg5.jpg"></li> </ul> </div> </body> </html>
- demo 效果：
