CSS盒子從底部滑動效果是一種常見的網頁設計效果。通過設置CSS動畫，可以讓盒子從底部緩慢滑動進入屏幕范圍內，從而增強視覺效果，提高用戶體驗。以下是一些示例代碼：

/* 定義CSS動畫 */
@keyframes slideInFromBottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
/* 應用CSS動畫 */
.box {
animation-name: slideInFromBottom;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
/* 將盒子隱藏在屏幕下方 */
.box {
position: absolute;
bottom: -100%;
left: 0;
right: 0;
}

以上代碼定義了一個名為slideInFromBottom的CSS動畫，使盒子從底部向上滑動進入屏幕。然后將這個動畫應用到.box類，并設置了一些動畫的參數，如動畫持續時間、動畫時間函數等。最后通過將盒子的bottom值設置為-100%，將盒子隱藏在屏幕下方。

當頁面加載時，通過JavaScript或CSS控制，將.box類的bottom值更新為0，從而啟動動畫。當動畫完成后，使用animation-fill-mode: forwards;使盒子保持在最后一個關鍵幀的狀態，以便留在屏幕上。

通過這種方法，我們可以輕松地實現CSS盒子從底部滑動效果。同時，我們也可以根據實際需求，調整動畫的參數，比如添加更多關鍵幀，改變動畫速度等等，以達到最佳視覺效果。