手风琴特效这么简单还不赶紧来学？

手风琴特效

效果展示

实现原理

鼠标移入到某张图片上时，使图片宽度变大，其余图片宽度减小。鼠标移入效果我们可以利用伪类:hover实现。

实现方法有两种：
第一种：最传统的布局方法，使用float。但需要计算图片缩小的尺寸，比较繁琐。
第二种：使用 CSS3 加入的新样式——弹性盒子display:flex，其中的弹性元素会自动分配剩余空间，无需手动计算缩小后每张图片所占像素。

方法一

我们先来展示 float 的写法：

html 结构：

<ul>
  <li><img src="1.png" alt="" /></li>
  <li><img src="2.png" alt="" /></li>
  <li><img src="3.png" alt="" /></li>
  <li><img src="4.png" alt="" /></li>
</ul>

css 样式：

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f8bbd0;
}
img {
  width: 250px;
  height: 325px;
}
li {
  list-style: none; /*消除无序列表默认样式*/
  width: 100px;
  transition: all 1s;
  float: left; /*使li浮动并列一行展示*/
}
ul {
  width: 400px;
  height: 325px;
  margin: 100px auto;
  overflow: hidden;
  box-shadow: 3px 3px 10px #555;
}
ul:hover li {
  width: 50px;
  /* 手动计算每张图片缩小后的大小 
    250px + 50px*3 = 400px*/
}
ul li:hover {
  width: 250px;
  /*鼠标移入时，该图片完全显示出来 
    与上面img设置的尺寸保持一致*/
}

注意： 先设置 ul:hover li{…}，再设置 ul li:hover{…}。顺序千万不能反，否则会出 BUG。因为鼠标第一触碰到的肯定是它的父级盒子 ul，其次再是里面的 li，所以顺序不能反！

方法二

html 结构：

<ul>
  <li><img src="1.png" alt="" /></li>
  <li><img src="2.png" alt="" /></li>
  <li><img src="3.png" alt="" /></li>
  <li><img src="4.png" alt="" /></li>
</ul>

css 样式：

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f8bbd0;
}
img {
  width: 250px;
  height: 325px;
}
li {
  list-style: none;
  width: 100px;
  overflow: hidden;/*一定要设置li超出部分隐藏*/
  transition: all 1s;
}
ul {
  width: 400px;
  height: 325px;
  display: flex;/*设置为弹性盒子*/
  margin: 100px auto;
  box-shadow: 3px 3px 10px #555;
}
li:hover {
  width: 250px;
  flex-shrink: 0;/*空间不足时,不会缩小*/
}

为什么一定要设置超出部分隐藏呢，如果不设置overflow:hidden，li里面的图片会超出li的宽度（只是表面上看上去的视觉隐藏了，因为后者li盖住了前者li，起到了视觉隐藏）。图片超出的部分会影响弹性元素li的自适应，当你鼠标放上去时候会发现，后面的元素被挤走了，前面的图片也没有发生自适应。如下图所示：

各位看官，如果觉得有帮助，麻烦看完给个三连