html无限轮播,纯 css 无限轮播

原理：

示例使用三张图片，第一张和最后一张相同

代码：

纯 css 无限轮播

*{

margin:0;

padding:0;

}

div{

width:300px;

height:188px;

border:1px solid #000;

margin:100px auto;

background-color:blue;

overflow:hidden;

}

.pic{

width:300px;

}

ul{

width:900px; /* 每张图片300px *张数3 */

height:188px;

background-color:black;

animation:carousel 8s linear 2s infinite normal;/**/

}

ul  li{

width:300px;

height:188px;

list-style:none;

float:left;

border:1px solid #000000;

box-sizing:border-box;

}

@keyframes carousel {

0%,60% {  margin-left:0px;  }

65%,90% {  margin-left:-300px;  }

99%,100% { margin-left:-600px;  }

}

• 
• 
•