css制作从下往上逐渐显示的div
html代码
<div class="div1"> <div class="mask"> <div class="div2">我是div顶部</div> </div> </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; } }
下面就是最后的成果:
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18