CSS3动画之⽆缝滚动
与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:0;
}
to{
left: -1000px;
}
}
.
box{
position: relative;
top: 0;
left:0;
width: 1000px;
overflow: hidden;
}
.left{
position: absolute;
top:0;js控制css3动画触发
left:0;
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;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。