首页 > 代码库 > H5+CSS3做图片轮播滚动效果
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做图片轮播滚动效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。