CSS3中的動(dòng)畫特效讓網(wǎng)頁設(shè)計(jì)更加生動(dòng)，其中從下往上展開動(dòng)畫效果為一種常用效果。在實(shí)現(xiàn)該動(dòng)畫效果時(shí)，主要利用CSS3的transition和transform屬性。

/*CSS代碼*/
.box {
width: 200px;
height: 0;
overflow: hidden;
background-color: #2196F3;
transition: height 0.5s ease-in-out;
transform-origin: top;
}
.box:hover {
height: 200px;
}

上述代碼中，首先設(shè)置容器.box的高度為0，overflow為hidden，使其內(nèi)容不可見。同時(shí)設(shè)置該容器的背景色為#2196F3，即深藍(lán)色。接下來利用transition屬性設(shè)置容器高度從0到200px的過渡效果，時(shí)長(zhǎng)為0.5s，緩動(dòng)函數(shù)為ease-in-out。

另外，利用transform-origin屬性指定動(dòng)畫變形的基點(diǎn)位置，本例中指定為頂部。

當(dāng)鼠標(biāo)懸停在容器上時(shí)，觸發(fā):hover偽類事件，使.box的高度從0過渡到200px，實(shí)現(xiàn)從下往上展開的效果。

需要注意的是，容器高度的設(shè)定應(yīng)根據(jù)內(nèi)容的實(shí)際高度進(jìn)行設(shè)置，否則會(huì)出現(xiàn)高度設(shè)置過小或過大的情況。