手风琴效果:
1.
2.
......
代码:
<!doctype>
<html>
<head>
<title>css3手风琴效果</title>
<meta charset="utf-8"/>
<meta name="Keywords" content="服务，服务"/>
<meta name="decription" content=""/>
<style>
/*泡沫层去除*/
*{padding:0;margin:0;}
/*大盒子*/
.main{
width:1180px;
height:405px;
border:3px solid #000;
overflow:hidden;
}
ul,li{list-style:none;}
/*小盒子*/
.list{width:2000px;}
.list li{
width:130px;
height:405px;
float:left;
transition:1s;
}
.list li:hover{
width:538px;
}
</style>
</head>
<body>
<div class="main">
<ul class="list">
<li><img src="img/0.jpg" width="538" height="405"/></li>
<li><img src="img/1.jpg" width="538" height="405"/></li>
<li><img src="img/2.jpg" width="538" height="405"/></li>
<li><img src="img/3.jpg" width="538" height="405"/></li>
<li><img src="img/4.jpg" width="538" height="405"/></li>
<li><img src="img/5.jpg" width="538" height="405"/></li>
</ul>
</div>
</body>
</html>
分析:
主要还是css3的使用，还有就是float浮动的使用，
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
