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;

}

}

下面就是最后的成果：

總結

以上是生活随笔為你收集整理的html中从下往上遮罩效果,css制作从下往上逐渐显示的div的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。