用css3實現循環滾動效果：
css：
#wrap{
width:?200px;
height:?150px;?
border:?1px?solid?#000;?
position:?relative;?
margin:?100px?auto;?
overflow:?hidden;
}
#list{
position:?absolute;
left:?0;?
top:?0;?
margin:?0;?
padding:?0;
animation:?move?12s?infinite?linear;
-webkit-animation:?move?12s?infinite?linear;
width:?500%;?
}
#list?li?{
list-style:?none;?
width:?200px;?
height:?150px;?
border:?0;?
float:?left;
}
@-webkit-keyframes?move{
0%?{
left:?0;
}
100%?{
left:?-800px;
}
}
@keyframes?move?{
0%?{
left:?0;
}
100%?{
left:?-800px;
}
}
#wrap:hover?#list?{
-webkit-animation-play-state:?paused;?/*動畫暫停播放*/
}
html：
<div?id="wrap">
<ul?id="list">
<li><a?href="#"><img?src="img/1.jpg"?border="0"?/></a></li>
<li><a?href="#"><img?src="img/2.jpg"?border="0"?/></a></li>
<li><a?href="#"><img?src="img/3.jpg"?border="0"?/></a></li>
<li><a?href="#"><img?src="img/4.jpg"?border="0"?/></a></li>
<li><a?href="#"><img?src="img/5.jpg"?border="0"?/></a></li>
</ul>
</div>
擴展資料：
animation（動畫）?屬性：
語法：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
參數：
1、animation-name：指定要綁定到選擇器的關鍵幀的名稱。?
2、animation-duration：動畫指定需要多少秒或毫秒完成。
3、animation-timing-function：設置動畫將如何完成壹個周期。
值：
linear：動畫從頭到尾的速度是相同的。
ease：默認。動畫以低速開始，然後加快，在結束前變慢。
ease-in：動畫以低速開始。
ease-out：動畫以低速結束。
ease-in-out：動畫以低速開始和結束。?
cubic-bezier(n,n,n,n)：在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。
4、animation-delay：設置動畫在啟動前的延遲間隔。?
5、animation-iteration-count ：定義動畫的播放次數。
值：
n：壹個數字，定義應該播放多少次動畫。
infinite：指定動畫應該播放無限次（永遠） 。