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

博客介绍了使用HTML和CSS代码实现div从下往上显示的效果。在HTML中,利用div1作为容器,div2为需显示的元素,借助遮罩mask辅助。CSS方面,让遮罩在div1底部增加高度,div2固定高度并定位至遮罩底部,最后添加动画达成效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

下面就是最后的成果:

转载于:https://juejin.im/post/5c8f41276fb9a070f2376b66

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值