CSS3手風(fēng)琴div是很常用的一種網(wǎng)頁設(shè)計效果。所謂“手風(fēng)琴”，就是指一些具有可伸縮性的元素，可以根據(jù)用戶的需求來改變尺寸。CSS3的手風(fēng)琴div便是在此基礎(chǔ)上制作的。

手風(fēng)琴div實現(xiàn)方法主要分為兩部分。第一部分是HTML代碼部分，我們需要使用div來作為容器，其中包含若干個的子元素；第二部分是CSS代碼部分，我們需要使用CSS3的transition和transform屬性來實現(xiàn)手風(fēng)琴效果。

//HTML代碼部分
<div class="accordion">
<div class="item">
<h2>元素1</h2>
<p>元素1的內(nèi)容</p>
</div>
<div class="item">
<h2>元素2</h2>
<p>元素2的內(nèi)容</p>
</div>
<div class="item">
<h2>元素3</h2>
<p>元素3的內(nèi)容</p>
</div>
</div>
//CSS代碼部分
.accordion {
width: 100%;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
display: flex;
flex-direction: column;
}
.item {
background: #f5f5f5;
overflow: hidden;
margin-bottom: 2px;
transition: all .3s ease-in-out;
}
.item:hover {
transform: scale(1.1);
}
.item h2 {
padding: 10px;
margin: 0;
cursor: pointer;
}
.item p {
padding: 10px;
margin: 0;
color: #333;
font-size: 16px;
line-height: 24px;
opacity: 0;
transition: opacity .3s ease-in-out;
}
.item.active h2 {
background: #ddd;
}
.item.active p {
opacity: 1;
}

通過上述CSS樣式代碼，我們可以實現(xiàn)手風(fēng)琴效果。當(dāng)鼠標(biāo)懸停在其中一個