CSS動(dòng)畫展開效果可以為網(wǎng)頁(yè)增添生動(dòng)和美感，讓用戶更加愉悅地使用網(wǎng)頁(yè)。我們可以使用CSS的transition和transform屬性來實(shí)現(xiàn)這種動(dòng)畫效果。

/* CSS樣式 */
.box {
width: 100px;
height: 100px;
background: #ccc;
transition: all 0.3s ease-in-out; /*過渡效果*/
}
.box.open {
height: 200px;
transform: rotate(180deg); /*旋轉(zhuǎn)180度*/
}
/* JavaScript代碼 */
var box = document.querySelector('.box'); // 獲取元素
box.addEventListener('click', function() {
box.classList.toggle('open'); // 切換class
});

如上代碼，我們首先定義了一個(gè)名為box的div元素，它的初始高度為100px，背景為灰色。通過CSS的transition屬性，我們定義了所有屬性在0.3秒內(nèi)漸變過渡。當(dāng)類名為open的樣式應(yīng)用于box元素時(shí)，高度變?yōu)?00px，并且使用transform屬性旋轉(zhuǎn)了180度。

在JavaScript代碼中，我們?cè)赽ox元素上添加了一個(gè)click事件監(jiān)聽器，當(dāng)用戶點(diǎn)擊框時(shí)，我們使用Element.classList.toggle() 方法在open和closed之間切換類名。

現(xiàn)在，我們可以在網(wǎng)頁(yè)中看到一個(gè)帶有動(dòng)畫效果的展開框，它能夠?yàn)榫W(wǎng)頁(yè)的交互性和美觀度增添不少分?jǐn)?shù)。