<!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>