CSS中，從下往上彈出層的效果是比較常見的一種動畫效果，下面我們就來學習一下它的實現。

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;
}

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

接下來，我們為這個彈出層設置了一個初始高度為0，背景色為白色。我們在樣式表中為這個彈出層添加了一個切換類名"show"。當這個彈出層需要展示的時候，我們通過JavaScript動態給這個彈出層添加"show"這個類名，使得它的高度從0變成了一定的值，這樣就可以展示出來了。

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