css3实现图片横向无缝滚动的效果

之前实现无缝滚动大多结合js，如今有了css3，就简单多了。

下面就一起看看实例吧。

html代码：

    

      
1
      
2
      
3
      
4
      
5
      
1
      
2
      
3
      
4
      
5
    

css样式：

*{
    margin: 0; 
    padding: 0;
}
#wrap{
    width: 500px;
    height: 100px; 
    border: 1px solid #000; 
    position: relative; 
    margin: 100px auto; 
    overflow: hidden;
}
#list{
    position: absolute;
    left: 0; 
    top: 0; 
    margin: 0; 
    padding: 0;    
    -webkit-animation: 3s move infinite linear; 
    width: 200%; 
}
#list li {
    list-style: none; 
    width: 98px; 
    height: 98px; 
    border: 1px solid #fff; 
    background: #000; 
    color: #fff; 
    font: 50px/98px Arial;
    text-align: center;
    float: left;
}
@-webkit-keyframes move{
    0% {
          left: 0;
    }
    100% {
          left: -500px;
    }
}
@keyframes move {
    0% {
       left: 0;
    }
    100% {
       left: -500px;
    }
}
#wrap:hover #list {
    -webkit-animation-play-state: paused; /*动画暂停播放*/
}