css3制作手风琴,一步步教你css3手风琴效果的实现

什么是手风琴效果？

首先我们先来看一段动画，如下图所示：

在上面动画中，我们不难发现，一排照片正常排列，当我鼠标移上(：hover)时，照片会变大显示并且把其它照片挤小。那么在鼠标来回移动的过程中，画面正常显示的效果类似我们的手风琴，所以叫手风琴效果。

手风琴效果的实现

把图片显示出来

通过上面的效果，我们不难发现，首先所有照片的集合是一个有1px边框的div盒子，盒子里面有一组ul li ，每个li标签里面有一张照片，那么我们首先把这段代码实现，html代码如下

css代码如下：

*{

margin:;

padding:;

border:;

list-style: none;

}

.box{

width: 1200px;

height: 300px;

border: 1px solid #000;

margin: 100px auto;

}

.box ul{

overflow: hidden;

}

.box ul li{

float: left;

width: 200px;

hei