直接代码贴出来吧。
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .myDiv { width: 500px; height: 200px; margin: 20px auto; overflow: hidden; } .container { width: 500%; animation: loop 10s linear infinite; } .container div { width: 20%; } img { width: 100%; height: 200px; } @keyframes loop{ 0% { margin-left: 0%; } 20% { margin-left: 0%; } 25% { margin-left: -100%; } 45% { margin-left: -100%; } 50% { margin-left: -200%; } 70% { margin-left: -200%; } 75% { margin-left: -300%; } 95% { margin-left: -300%; } 100% { margin-left: -400%; } } .fl { float: left; } </style> </head> <body> <div class="myDiv"> <div class="container"> <div class="fl"> <img src="image/1.jpg"> </div> <div class="fl"> <img src="image/2.jpg"> </div> <div class="fl"> <img src="image/3.jpg"> </div> <div class="fl"> <img src="image/4.jpg"> </div> <div class="fl"> <img src="image/1.jpg"> </div> </div> </div> </body> </html>
animation中之所以设置两个两个之间margin-left相等是为了实现“停顿”效果，看上去自然一些。