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;
    }
}

下面就是最後的成果：