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

最新推荐文章于 2025-07-01 21:10:56 发布

weixin_34185512

最新推荐文章于 2025-07-01 21:10:56 发布

阅读量1.6w

点赞数 4

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c8f41276fb9a070f2376b66

博客介绍了使用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