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>
html滚动效果代码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>
最终效果图如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。