CSS中，從下往上彈出層的效果是比較常見的一種動(dòng)畫效果，下面我們就來學(xué)習(xí)一下它的實(shí)現(xiàn)。

html, body {
height: 100%;
}
.popup {
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
height: 0;
background: #fff;
transition: height 0.3s ease-out;
}
.popup.show {
height: 40%;
}
.popup-content {
padding: 20px;
}

首先，我們需要定義一個(gè)容器元素，用來包裹整個(gè)彈出層。這個(gè)容器元素需要設(shè)置position為fixed，bottom為0，這樣就可以將彈出層定位在頁面底部。在樣式表中，我們將這個(gè)容器元素命名為"popup"。

接下來，我們?yōu)檫@個(gè)彈出層設(shè)置了一個(gè)初始高度為0，背景色為白色。我們?cè)跇邮奖碇袨檫@個(gè)彈出層添加了一個(gè)切換類名"show"。當(dāng)這個(gè)彈出層需要展示的時(shí)候，我們通過JavaScript動(dòng)態(tài)給這個(gè)彈出層添加"show"這個(gè)類名，使得它的高度從0變成了一定的值，這樣就可以展示出來了。

最后，我們給彈出層定義了一個(gè)padding，為了給其中的內(nèi)容留出一些空間。