css制作从下往上逐渐显示的div

2023-03-22 14:24| 来源: 网络整理| 查看: 265

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; } } 复制代码

下面就是最后的成果：

【本文地址】

公司简介

联系我们