css从上到下逐渐加载,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;

}

下面就是最后的成果：

本文由乐趣区整理发布，转载请注明出处，谢谢。

css从上到下逐渐加载,css制作从下往上逐渐显示的div相关推荐

jQuery模拟原生态App上拉刷新下拉加载效果代码
以下任意均可: 1. jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. 原文:http://www.sucaij ...
html下拉加载原理,GitHub - gavinjzx/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...
原生JS实现微信公众号或网页使用下拉加载和上拉刷新微信浏览器打开网页显示网址安全信息解决办法,网上很多办法,也找了很久,但是最新的很多用不了. 先看看效果,是不是亲想要的,可以跳过,以免浪费宝贵时间 ...
html下拉加载实现原理,GitHub - sybiele/wxPull: 原生JS实现微信公众号或网页使用下拉加载和上拉刷新...
原生JS实现微信公众号或网页使用下拉加载和上拉刷新微信浏览器打开网页显示网址安全信息解决办法,网上很多办法,也找了很久,但是最新的很多用不了. 先看看效果,是不是亲想要的,可以跳过,以免浪费宝贵时间 ...
uniapp 微信小程序分页方法：uni-pagination分页插件和上拉分页、下拉加载刷新、刷新后回到顶部
1.uni-pagination分页插件先去uniapp插件市场安装分页插件: uni-app官网https://uniapp.dcloud.io/component/uniui/uni-pagin ...
无法加载html样式,无法加载css是什么原因？
CSS主要用来设计网页的样式,美化网页:它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式 ...
iscroll5 上拉，下拉加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
如何只在IE上加载CSS样式表
前言:IE一直是特殊的一个浏览器,我们可以使用一些方法来指定样式表只在IE浏览器下被加载. IE9以及低于IE9版本 : 可以使用条件注释语句来加载特定于ie的样式表.如下所示,使用外部样式表. &l ...
Android之 RecyclerView，CardView 详解和相对应的上拉刷新下拉加载
为什么80%的码农都做不了架构师?>>> 随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 M ...

css从上到下逐渐加载,css制作从下往上逐渐显示的div

css从上到下逐渐加载,css制作从下往上逐渐显示的div相关推荐

最新文章

热门文章