html中从下往上遮罩效果,css制作从下往上逐渐显示的div

html代码

我是div顶部

其中div1是整个容器，div2是需要从下往上显示的div。如果只是改变height高度的话，会导致div从上往下慢慢显示，所以并不能直接设置div2的高度来达成效果，此时我们需要一个遮罩mask来帮助div2达成想要的效果。

css代码

.div1{

width: 400px;

height:400px;

background: #ccc;

position: relative;

}

.div2{

width: 200px;

height: 400px;

background: #0099CC;

position: absolute;

left: 0;

bottom: 0;

}

.mask{

width: 200px;

height: 400px; /* 高度是变量 */

position: absolute;

left: 0;

top: 0; /* top是变量 */

}

这是动画之后的css，div已经在了它最后应该在的位置。 那么我这里让div2从下往上显示的想法就是：遮罩mask始终在div1最下方的同时增加height，div2固定高度的同时绝对定位至遮罩mask的底部。 只要满足mask.height + mask.top = div1.height，就不会让mask从外观来看是从下往上显示的。

最后加上动画效果

.mask{

animation: animate 5s ease infinite;

overflow: hidden;

}

@keyframes animate{

from {

height: 0px;

top : 400px;

}

to {

height: 400px;

top : 0px;

}

}

下面就是最后的成果：