html中从下往上遮罩效果,css制作从下往上逐渐显示的div
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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nodejs正则提取html,Nodej
- 下一篇： 批量html转换成excel,Excel