H5+CSS3作圖片輪播滾動效果

HTML代碼部分：

 1 <div id="wrap">  2 <ul id="list">  3 <li>10</li>  4 <li>9</li>  5 <li>8</li>  6 <li>7</li>  7 <li>6</li>  8  9 <li>5</li> 10 <li>4</li> 11 <li>3</li> 12 <li>2</li> 13 <li>1</li> 14 </ul> 15 </div>

CSS3代碼部分：

 

 1 <style type="text/css">  2  @-webkit-keyframes move{  3  0%{left:-500px;}  4  100%{left:0;}  5  }  6  #wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;  7  overflow: hidden;}  8  9  #list{position:absolute;left:0;top:0;padding:0;margin:0; 10  -webkit-animation:5s move infinite linear;width:200%;} 11 12  #list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink; 13  color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微軟雅黑';} 14 15  #wrap:hover #list{-webkit-animation-play-state:paused;} 16 </style>

最終效果圖以下：