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>

最终效果图如下：

 

posted @ 2016-10-05 08:17  smille2020  阅读(34938)  评论(0)  编辑  收藏  举报