从下往上慢慢显示CSS的效果是一种很酷的效果，可以让用户对网站的元素产生更加深刻的印象和兴趣。下面我们来介绍一下如何实现这种效果。

body {
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column-reverse;
}
section {
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 5rem;
font-weight: bold;
transition: transform 2s ease-in-out;
}
section:nth-child(1) {
background-color: purple;
}
section:nth-child(2) {
background-color: blue;
}
section:nth-child(3) {
background-color: green;
}
section:nth-child(4) {
background-color: yellow;
}
section:nth-child(5) {
background-color: orange;
}

我们通过将body元素的高度设置为100vh，并且隐藏溢出部分来确保网页中只显示一个屏幕的内容，然后使用flex布局使得每个section元素都铺满屏幕并且垂直居中。

接着，在每个section元素中分别添加不同的背景颜色，并且使用nth-child选择器对每个section元素进行编号，以便我们后面对它们进行动画效果的设置。

最后，在CSS中设置每个section元素的过渡效果，使得它们的移动变得更加平滑。同时，我们还通过将flex-direction属性设置为column-reverse来确保section元素可以从底部往上递进显示。