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;
}
}
下面就是最后的成果：
本文由乐趣区整理发布，转载请注明出处，谢谢。
