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

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

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

html代碼


    
        我是div頂部

其中div1是整個(gè)容器，div2是需要從下往上顯示的div。如果只是改變height高度的話，會(huì)導(dǎo)致div從上往下慢慢顯示，所以并不能直接設(shè)置div2的高度來(lái)達(dá)成效果，此時(shí)我們需要一個(gè)遮罩mask來(lái)幫助div2達(dá)成想要的效果。

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是變量 */
    }

這是動(dòng)畫(huà)之后的css，div已經(jīng)在了它最后應(yīng)該在的位置。那么我這里讓div2從下往上顯示的想法就是：遮罩mask始終在div1最下方的同時(shí)增加height，div2固定高度的同時(shí)絕對(duì)定位至遮罩mask的底部。只要滿足mask.height + mask.top = div1.height，就不會(huì)讓mask從外觀來(lái)看是從下往上顯示的。

最后加上動(dòng)畫(huà)效果

.mask{
     animation: animate 5s ease infinite;
     overflow: hidden;
}
@keyframes animate{
    from {
           height: 0px;
        top : 400px;
    }
    to {
        height: 400px;
        top : 0px;
    }
}

下面就是最后的成果：

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117544.html

相關(guān)文章

使用 GreenSock 來(lái)制作 SVG 動(dòng)畫(huà)

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

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

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

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

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

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

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

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

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

olle 2019-08-30 15:43 評(píng)論0 收藏0