css设置div从下到上显示,科技常识：css制作从下往上逐渐显示的div

今天小编跟大家讲解下有关css制作从下往上逐渐显示的div ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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;

}

}

来自：https://segmentfault.com/a/1190000018556996

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。