html怎么实现图片左右滚动,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; /*动画暂停播放*/

}

另外一个例子：