您的位置：首页 > Web前端 > CSS

CSS3动画之无缝滚动

2015-09-21 21:15 585 查看

与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;
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;
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航