html5用css实现轮播,[网页设计]CSS3 实现简单轮播图

[网页设计]CSS3 实现简单轮播图

0 2016-08-30 17:00:11

用css3动画实现图片切换效果，原理还是改变left值。只有最简单的自动播放功能，切换后短时间静止，通过最后的位置克隆第一张图片，实现无缝切换。

html结构

• 
• 
• 
• 

css样式*{ margin: 0; padding: 0; text-decoration: none; } ul{ list-style: none; } #container{ position: relative; width: 400px; height: 200px; overflow: hidden;/*隐藏溢出的图片*/ } .pic{ width:1600px;/*4张图的宽度*/ position: absolute;/*基于父容器进行定位*/ left:0; animation-name: focusmap; animation-duration: 12s; animation-iteration-count: infinite;//动画调用可以简写 } @keyframes focusmap { 0%,30%{ left: 0; } 35%,65%{ left: -400px; } 70%,99%{ left: -800px; } 100%{ left: -1200px; } } .pic li{ float: left; background: #5dd94e; } .pic li img { width: 400px; height: 200px; }

转载请保留本文网址：http://www.shaoqun.com/a/249194.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

CSS

0