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>

最終如下：

 

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