CSS3 圖片手風琴效果是一個常用的網頁設計技術，它可以為網頁添加生動、活潑、多彩的視覺效果。下面我們來介紹如何使用 CSS3 實現圖片手風琴效果。

.accordion {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 400px;
}
.accordion-item {
flex: 1;
height: 100%;
position: relative;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
.accordion-item:hover {
flex: 6;
}
.accordion-item img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.accordion-item:hover img {
transform: scale(1.1);
}

代碼解釋：

.accordion 類和 .accordion-item 類都是樣式控制器，其中 .accordion 類用于定位整個圖片手風琴的位置和寬高，.accordion-item 類則用于控制每個圖片單元的位置和寬高。

在 .accordion-item 類中，我們使用了 flex 布局、position:relative 以及 overflow:hidden 等屬性。這樣就可以實現當用戶鼠標懸停到某個圖片單元上時，該單元會放大，并將其他單元壓縮到一邊，從而實現手風琴效果。

在 .accordion-item 中，我們還為圖片添加了 transform: scale(1)；屬性，以控制圖片是否放大，并添加了圖片懸停時的過渡動畫效果。

總之，使用 CSS3 實現手風琴效果是一個簡單、頗具創意的網頁設計技巧，希望大家可以好好學習，借鑒網頁設計中的精華，不斷提升自己的設計水平。