与js的无缝滚动类似，整个承载图片的盒子移动，克隆一组图片放置最后，当一组图片播放结束后将盒子定位在有一组图片宽度的左侧
HTML结构：
<div class="box">
<ul class="left">
<li><img src="../image/wufenggundong/1.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/2.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/3.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/4.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/5.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/6.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/7.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/8.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/1.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/2.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/3.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/4.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/5.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/6.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/7.jpg" alt=""/></li>
<li><img src="../image/wufenggundong/8.jpg" alt=""/></li>
</ul>
</div>
CSS：
.box{
position: relative;
width: 1000px; /*一组图片的宽度*/
height: 90px;
padding: 5px 0;
overflow: hidden;
border:1px solid black;
}
.left{
position: absolute;
width: 10000px;/*拷贝一组图片，让父盒子足够宽*/
top: 0px;
left: 0px;
-webkit-animation: anim 8s linear 0s infinite;
-o-animation: anim 8s linear 0s infinite;
animation: anim 8s linear 0s infinite;
}
.box li{
float: left;
}
.left img{
width: 125px;
height: 90px;
}
@-webkit-keyframes anim {
from{
left:;
}
to{
left: -1000px;
}
}
.box{
position: relative;
top:;
left:;
width: 1000px;
overflow: hidden;
}
.left{
position: absolute;
top:;
left:;
width: 10000px;
-webkit-animation: anim 30s linear 0s infinite;
-o-animation: anim 30s linear 0s infinite;
animation: anim 30s linear 0s infinite;
}
.left li{
float: left;
}
.left li img{
width: 125px;
height: 90px;
}
@-webkit-keyframes anim {
from{
left: 0px;
}
to{
left: -1000px;
}
}