css3手风琴效果

手风琴效果:

1. 
 css3手风琴效果_第1张图片
2.
 css3手风琴效果_第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浮动的使用,

你可能感兴趣的:(css3)