css3轮播图

来源：互联网发布：凤凰金融以大数据编辑：程序博客网时间：2024/05/16 13:54

之前用纯css3实现的轮播图,最近翻出来看看,顺便也分享给大家,但是效果上没有js实现的那么流畅,纯粹就是扩展下知识点,真正在项目中实现的话还是用js实现的比较流畅一点,如各路大神有更好的css实现方法,不妨告诉一下晚辈,蟹蟹!下面是简单实现过程过程.

html:

<div class="banner"><ul><li><a href="#"><img src="images/bg5.jpg" width="700" height="300"/></a></li><li><a href="#"><img src="images/bg4.jpg" width="700" height="300" /></a></li><li><a href="#"><img src="images/bg3.jpg" width="700" height="300" /></a></li><li><a href="#"><img src="images/bg5.jpg" width="700" height="300" /></a></li><li><a href="#"><img src="images/bg3.jpg" width="700" height="300" /></a></li></ul></div>

CSS:

<style type="text/css">*{margin:0px;padding:0px;}body{background:#888}ul,li{list-style:none}.banner{width:845px;height:300px;margin:100px auto;box-shadow:0 0 10px rgba(0,0,0,.7);overflow:hidden;}.banner li{width:168px;float:left;border-left:1px solid #fff;transition:all 0.6s ease;}.banner ul:hover li{width:35px;}.banner ul li:hover{width:700px;transition:all 2s ease;}</style>

0 0