在网页设计中，经常需要一些特效来增加页面的吸引力。其中一种效果是重下往上拉，也被称为“下往上翻转”或“底部露出特效”。这种效果可以让用户感受到网页的动态性，提升用户体验。

.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代码实现了重下往上拉的效果。首先，将最外层容器的高度固定为300px，然后使用overflow: hidden将盒子内部的内容超出部分隐藏起来，从页面上看只会看到300px高度的容器。

接着，使用position: absolute和bottom: 0将包含内容的盒子放在底部，并设定宽度和高度为100%。利用transform: translateY(100%)让盒子上移，当出发鼠标悬停事件container:hover时，将盒子的位置还原，即transform: translateY(0%)。通过transition: transform 0.5s ease-in-out设置过度时间和过度效果，使动效更加自然平滑。