技術標籤：筆記htmlcsscss3

手風琴特效

效果展示

實現原理

滑鼠移入到某張圖片上時，使圖片寬度變大，其餘圖片寬度減小。滑鼠移入效果我們可以利用偽類: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的自適應，當你滑鼠放上去時候會發現，後面的元素被擠走了，前面的圖片也沒有發生自適應。如下圖所示：