首页 > 代码库 > CSS3最简洁的轮播图

CSS3最简洁的轮播图

2024-08-24 03:31:36   221人阅读

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

 

CSS3最简洁的轮播图


联系
我们