在網(wǎng)頁設計中，經(jīng)常需要一些特效來增加頁面的吸引力。其中一種效果是重下往上拉，也被稱為“下往上翻轉”或“底部露出特效”。這種效果可以讓用戶感受到網(wǎng)頁的動態(tài)性，提升用戶體驗。

.container {
position: relative;
height: 300px;
overflow: hidden;
 }
.box {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
background: #fff;
transform: translateY(100%);
transition: transform 0.5s ease-in-out;
 }
.container:hover .box {
transform: translateY(0%);
 }

上面這段CSS代碼實現(xiàn)了重下往上拉的效果。首先，將最外層容器的高度固定為300px，然后使用overflow: hidden將盒子內部的內容超出部分隱藏起來，從頁面上看只會看到300px高度的容器。

接著，使用position: absolute和bottom: 0將包含內容的盒子放在底部，并設定寬度和高度為100%。利用transform: translateY(100%)讓盒子上移，當出發(fā)鼠標懸停事件container:hover時，將盒子的位置還原，即transform: translateY(0%)。通過transition: transform 0.5s ease-in-out設置過度時間和過度效果，使動效更加自然平滑。