css loading 效果
.loading{
width:160px;
height:56px;
position: absolute;
top:50%;
left:50%;
line-height:56px;
color:#fff;
padding-left:60px;
font-size:15px;
background: #000 url(images/loader.gif) no-repeat 10px 50%;
opacity: 0.7;
z-index:9999;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
<div id="loading" class="loading">Loading pages...</div>
//遮罩层,
.loading{
position: fixed;
top: 0px;
left: 0px;
right:0px;
bottom:0px;
background-color: #8FB0D1;
-moz-opacity: 0.5;
opacity:0.5;
z-index:1001;
filter: alpha(opacity=40);
padding-top: 20%;
}
css loading 效果的更多相关文章
- 自定义ajax,添加loading效果
自定义ajax /** * @desc 自定义ajax请求,添加等待gif */ var n=0; $.defineAjax=function(obj){ n++; if(!$('#loadingDi ...
- 使用CSS时间打点的Loading效果的教程
基于box-shadow实现的打点效果 理论上,box-shadow可以实现任意的图形效果,自然我们可以利用box-shadow生成我们的点效果,然后通过animation控制不同时间点点的数目就可以 ...
- 前端页面loading效果(CSS实现)
当首页内容或图片比较多时,加载时间会比较长,此时可能出现页面白屏的情况,用户体验较差.所以,在页面完全加载出来之前,可以考虑加入loading效果,当页面完全加载完后,是loading消失即可. 1. ...
- CSS content换行技术实现字符animation loading效果
一.之前我的字符loading实现 关于字符打点动画实现,我之前使用过box-shadow模拟,还有border+background模拟,还有使用text-shadow实现,以及今年自认为是最好的实 ...
- 纯CSS仿windows系统loading效果
今天分享的css3案例模仿了window系统下的loading效果里面最关键的地方使用了css3 animation的delay属性以及贝塞尔曲线(cubic-bezier)的过渡效果,如下所示 sp ...
- 网页Loading效果
问题描述:由于项目要求在页面提交以及加载的时候,有短暂的卡顿,需要用loading过渡. 1.下一个页面加载的时候实现: base-loading.js //获取浏览器页面可见高度和宽度 var _P ...
- 赞!15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
- CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...
随机推荐
- crypt函数加密验证
body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...
- Spring容器三种注入类型
Spring注入有三种方式: 1.Set注入(使用最多) 2.构造器注入(使用不多) 3.接口注入(几乎不用)不做测试了 1.Set注入:所谓Set注入就是容器内部调用了bean的Set***方法,注 ...
- 马士兵_JAVA自学之路(为那些目标模糊的码农们)
转载自:http://blog.csdn.net/anlidengshiwei/article/details/42264301 JAVA自学之路 一:学会选择 为了就业,不少同学参加各种各样的培训. ...
- asp页面快速找到菜单按钮转向的页面的方法
asp页面快速找到菜单按钮转向的页面的方法: 鼠标放在按钮上,右键属性即可查看
- python sys.path.append()和sys.path.insert()
python程序中使用 import XXX 时,python解析器会在当前目录.已安装和第三方模块中搜索 xxx,如果都搜索不到就会报错. 使用sys.path.append()方法可以临时添加搜索 ...
- 数据交换格式 —— JSON(JavaScript Object Notation)
当请求 headers 中,添加一个name为 Accept,值为 application/json 的 header(也即"我"(浏览器)接收的是 json 格式的数据),这样, ...
- Postfix邮件黑名单和白名单
本文主要介绍如何用Postfix添加域名黑名单和白名单,用以处理垃圾邮件. 1.修改postfix主配置文件,增加限制语句 vim /etc/postfix/main.cf # 文末添加一行,限制往本 ...
- 线性回归 Linear regression(4) 局部加权回归
这篇文章将介绍过拟合和欠拟合的概念,并且介绍局部加权回归算法. 过拟合和欠拟合 之前在线性回归中,我们总是将单独的x作为我们的特征,但其实我们可以考虑将,甚至x的更高次作为我们的特征,那么我们通过线性 ...
- three.js中点生成矩阵方法
正常情况用threejs 点生成matrix4,方法为: 例如生成饶Y轴旋转的矩阵我们要的结果为: [cos, 0, -sin, 0, 0, 1, 0, 0, sin, 0, cos, ...
- 每天一个linux命令(文件操作):【转载】find命令之exec
find是我们很常用的一个Linux命令,但是我们一般查找出来的并不仅仅是看看而已,还会有进一步的操作,这个时候exec的作用就显现出来了. exec解释: -exec 参数后面跟的是command ...