css制作從下往上逐漸顯示的div

shuibo 發(fā)布于2019-08-30 15:56 / 2605人閱讀

摘要：代碼我是頂部其中是整個容器，是需要從下往上顯示的。那么我這里讓從下往上顯示的想法就是遮罩始終在最下方的同時增加，固定高度的同時絕對定位至遮罩的底部。只要滿足，就不會讓從外觀來看是從下往上顯示的。

html代碼


    
        我是div頂部

其中div1是整個容器，div2是需要從下往上顯示的div。如果只是改變height高度的話，會導(dǎo)致div從上往下慢慢顯示，所以并不能直接設(shè)置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已經(jīng)在了它最后應(yīng)該在的位置。那么我這里讓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;
    }
}

下面就是最后的成果：

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/117544.html

相關(guān)文章

使用 GreenSock 來制作 SVG 動畫

摘要：在制作動畫方面也非常強悍，并且還專門提供了用于加強動畫制作的相關(guān)插件，比如。一個有趣的的動畫效果就完成了，代碼地址使用配合來制作動畫效果如此簡單。原文地址，根據(jù)自己理解整理了下這個教程，主要是來學(xué)習(xí)下使用來制作動畫效果的思路和方法。這是我的一個關(guān)于SVG的應(yīng)用的技術(shù)分享網(wǎng)站svgtrick.com，會同步一些文章到這里來，更多關(guān)于SVG技術(shù)應(yīng)用可以去網(wǎng)站看看。最近從Dribbble...

everfly 2019-08-22 10:49 評論0 收藏0
淺談新的布局方式-flex

摘要：布局，可以簡便完整響應(yīng)式地實現(xiàn)各種頁面布局。一基本概念采用布局的元素，稱為容器，簡稱容器。它的所有子元素自動成為容器成員，稱為項目，簡稱項目。項目在垂直上的對齊方式。優(yōu)先級或者允許單個項目有與其他項目不一樣的對齊方式，可覆蓋屬性。引言：　　網(wǎng)頁布局在flex出來之前，是由盒模型為底子，float，position，table，百分比來進行布局的，重繪的比較多，影響性能，復(fù)雜又不好維護。fl...

Maxiye 2019-04-23 13:35 評論0 收藏0
HTML與BODY的表現(xiàn)

摘要：最后的解決辦法是如下后來查閱了一些資料，發(fā)現(xiàn)這個問題能夠通過來解決。。。默認(rèn)情況下，不是高度顯示的，想讓支持，需要在上添加。最近糾結(jié)于一個body滿鋪的問題，具體情況是： body背景圖高度固定在2000px左右；body內(nèi)內(nèi)容高度不固定（可能會小于瀏覽器可視窗口高度，也可能會高于背景圖高度即高于2000px）；稍早前的實現(xiàn)方案是做一塊背景div，用js監(jiān)控滑動位置，再對其進行fi...

dingda 2019-08-01 15:03 評論0 收藏0
CSS 火焰？不在話下

摘要：下圖是我鼓搗到另外一個小，當(dāng)?shù)皆氐臅r候，產(chǎn)生火焰效果嗯，這些其實都是對濾鏡及混合模式的一些搭配運用。主要幾個屬性默認(rèn)大家已經(jīng)掌握了大概，閱讀后可以自行去了解補充更多細節(jié)更多精彩技術(shù)文章匯總在我的，持續(xù)更新，歡迎點個訂閱收藏。正文從下面開始。今天的小技巧是使用純 CSS 生成火焰，逼真一點的火焰。嗯，長什么樣子？在 CodePen 上輸入關(guān)鍵字?CSS Fire，能找到這樣的：或者...

Cciradih 2019-04-23 11:43 評論0 收藏0
CSS 火焰？不在話下

摘要：今天的小技巧是使用純生成火焰，逼真一點的火焰。如上圖，整個蠟燭的骨架，除去火焰的部分很簡單，掠過不講。利用上述，我們要先生成一個類似火焰形狀的三角形。正文從下面開始。今天的小技巧是使用純 CSS 生成火焰，逼真一點的火焰。嗯，長什么樣子？在 CodePen 上輸入關(guān)鍵字 CSS Fire，能找到這樣的： showImg(https://segmentfault.com/img/...

olle 2019-08-30 15:43 評論0 收藏0