什么是手风琴效果?
首先我们先来看一段动画,如下图所示:
在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(: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{
ov