CSS從下往上看滑入是一種常見的網頁設計效果，它可以讓網頁看起來更加生動、有趣。而要實現這種效果，主要需要借助CSS的一些屬性和技巧。下面，就讓我們來一起學習一下吧!

.slide-up {
opacity: 0; /* 先將元素設為透明 */
transform: translateY(100%); /* 將元素下移出視窗 */
transition: all 0.3s ease-in-out; /* 添加過渡效果 */
}
.slide-up.in-view {
opacity: 1; /* 元素透明度設為1，使其可見 */
transform: translateY(0); /* 元素從下往上滑入視窗中 */
}

上述代碼中，我們定義了一個名為.slide-up的CSS類，它包含了元素從下往上“滑入”的動畫效果。首先，我們將元素的透明度設為0，并將其下移出視窗。接著，我們添加了一個all（表示“全部”）類型的過渡效果，使得元素在下滑到底部時能夠“漸變”過度到可見狀態。

接著，我們又定義了一個名為slide-up.in-view的CSS類，它表示元素在視窗中可見時的狀態。我們通過將元素的透明度設為1，以及使用translateY(translatex)%將元素從下往上滑入視窗中來實現這種效果。

最后，我們只需使用JavaScript等技術將.slide-up類和.slide-up.in-view類應用于需要實現從下往上滑入效果的元素即可。代碼如下:

var slideUp = document.querySelectorAll(".slide-up");
function slide() {
for (var i = 0; i< slideUp.length; i++) {
var slideUpPosition = slideUp[i].getBoundingClientRect()
.top + window.innerHeight;
if (window.innerHeight >slideUpPosition) {
slideUp[i].classList.add("in-view");
}
}
}
window.addEventListener("scroll", slide);

上述代碼中，我們首先使用querySelectorAll()方法選取了所有帶有.slide-up類的元素，然后定義了一個名為slide()的函數來判斷元素是否已經進入視窗中，并在進入視窗時為該元素添加.slide-up.in-view類。最后，我們通過window.addEventListener()方法將slide()函數添加為瀏覽器的滾動事件監聽器，以便在滾動頁面時動態地添加類名并實現滑入效果。