CSS3是在CSS2版本的基礎(chǔ)上新增的一系列功能，其中就包括了一些給網(wǎng)頁增添動(dòng)態(tài)效果的新特性，比如從底部淡入的特效。這種效果可以讓網(wǎng)頁中的元素在頁面自下而上的位置逐漸浮現(xiàn)，從而給用戶帶來更加流暢和自然的視覺感受。

.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.fade-in.fade-in-active {
opacity: 1;
transform: translateY(0px);
}

上面這段CSS代碼就是實(shí)現(xiàn)從底部淡入效果的關(guān)鍵，其中包括了兩個(gè)class：fade-in和fade-in-active。在元素最初的狀態(tài)下，可以給它加上一個(gè)fade-in的class，表示讓它從不透明度為0開始漸變。同樣，在初始狀態(tài)下，還可以通過transform屬性讓元素向下移動(dòng)一段距離，來配合fade-in效果的實(shí)現(xiàn)。

當(dāng)需要觸發(fā)淡入效果時(shí)，可以通過JavaScript來控制給元素加上另一個(gè)class，即fade-in-active。這個(gè)class中包含的屬性值，與fade-in類似，只不過是逆序進(jìn)行動(dòng)畫效果的消失和漸變。

最后需要注意的一點(diǎn)是，為了保證效果的兼容性，可以在CSS代碼中同時(shí)使用-webkit-、-moz-和-o-等前綴來表示瀏覽器廠商的不同實(shí)現(xiàn)方式。這樣就可以滿足各種不同使用情況下的需求了。