利用CSS3制作无缝滚动

不依赖任何脚本,利用CSS3制作出一个无缝滚动的动画效果,实现原理非常简单,下面咱就一起看看

css3.jpg

演示地址

第一步:

先创建个HTML结构:

<div class="pic_list">
    <ul>
       <li><a href="##"><img src="http://helloweb.wang/e/data/tmp/titlepic/48f75c72fe095c58471592fc7a487a4a.jpg"></a></li>
     <li><a href="##"><img src="http://helloweb.wang/e/data/tmp/titlepic/8e481909e4cc122b6763d1cc41927c2f.jpg"></a></li>
     <li><a href="##"><img src="http://helloweb.wang/e/data/tmp/titlepic/2c8338f4e79f58e07c8b9e4112692b88.jpg"></a></li>
     <li><a href="##"><img src="http://helloweb.wang/e/data/tmp/titlepic/48f75c72fe095c58471592fc7a487a4a.jpg"></a></li>
     <li><a href="##"><img src="http://helloweb.wang/e/data/tmp/titlepic/8e481909e4cc122b6763d1cc41927c2f.jpg"></a></li>
     <li><a href="##"><img src="http://helloweb.wang/e/data/tmp/titlepic/2c8338f4e79f58e07c8b9e4112692b88.jpg"></a></li>
   </ul>
</div>

第二步:

修饰的CSS样式:

*{
    margin:0;
   padding:0;
}
ul{
   list-style:none;
}
.pic_list{
   width:660px;
   height:140px;
   margin:100px auto 0;
   border:1px solid #666;
   border-radius:5px;
   box-shadow:0 0 10px #999;
   overflow:hidden;
   position:relative;
}
ul{
   width:1332px;
   position:absolute; 
   animation:gundong 10s linear infinite;
}
ul:hover{
   animation-play-state:paused;
}
ul li{
   float:left;
   width:220px;
   height:138px;
   border:1px solid #fff;
   transition:all 0.5s;
}
ul li:hover{
   border:1px solid red;
}

第三步:

使用@keyframes定义个动画,让它滚动起来

@keyframes gundong{
   0%{ left:0; }
   100%{ left:-660px; } 
}

至此这个完整的dom算是做完了,其实我们用到的新的属性是:animation-play-state:paused  规定动画正在运行还是暂停 ,可以看这个小示例

是不是很酷!



原文链接:HelloWeb前端网 » 利用CSS3制作无缝滚动 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享