公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

利用CSS3制作无缝滚动

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

利用CSS3制作无缝滚动_www.uibq.com

演示地址

第一步:

先创建个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; } 
} 
关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)