<!DOCTYPE html> <html> <head> <title>CSS3最简洁的轮播图</title> <style> *{margin:0;padding:0;} .ckl{ margin:50px auto; overflow:hidden; height:300px; width:700px; position:relative; } ul{ list-style:none; height:300px; width:2800px; position:absolute; animation: myfirst 20s ease-out infinite alternate; -webkit-animation: myfirst 20s ease-out infinite alternate; /* Safari 与 Chrome */ } ul img{ width:700px; height:300px; } .ckl ul li{ float:left; height:300px; width:700px; } @keyframes myfirst { 0%,25% { left: 0px; } 30%,50% { left: -700px; } 55%,75% { left: -1400px; } 80%,100% { left: -2100px; } } </style> </head> <body> <div class="ckl"> <ul> <li><img src="https://cdn.pixabay.com/photo/2016/11/13/12/52/kuala-lumpur-1820944_960_720.jpg"></li> <li><img src="https://cdn.pixabay.com/photo/2014/07/21/18/31/kuala-lumpur-398792_960_720.jpg"></li> <li><img src="https://cdn.pixabay.com/photo/2015/08/28/08/06/malaysia-911580_960_720.jpg"></li> <li><img src="https://cdn.pixabay.com/photo/2012/02/28/00/39/sunset-17665_960_720.jpg"></li> </ul> </div> </body> </html>