手风琴特效
效果展示
实现原理
鼠标移入到某张图片上时，使图片宽度变大，其余图片宽度减小。鼠标移入效果我们可以利用伪类: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的自适应，当你鼠标放上去时候会发现，后面的元素被挤走了，前面的图片也没有发生自适应。如下图所示：