css制作从下往上逐渐显示的div

shuibo 发布于2019-08-30 15:56 / 2388人阅读

摘要：代码我是顶部其中是整个容器，是需要从下往上显示的。那么我这里让从下往上显示的想法就是遮罩始终在最下方的同时增加，固定高度的同时绝对定位至遮罩的底部。只要满足，就不会让从外观来看是从下往上显示的。

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

下面就是最后的成果：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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