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

shuibo 發布于2019-08-30 15:56 / 2389人閱讀

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

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

下面就是最后的成果：

GPU云服務器云服務器 css的div div + css flash div css div加css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117544.html

使用 GreenSock 來制作 SVG 動畫

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

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

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

Maxiye 2019-04-23 13:35 評論0 收藏0
HTML與BODY的表現

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

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

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

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

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

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