给web请求加遮罩动画
效果预览:
css:
/*#fountainG{
position:relative;
margin:10% auto;
width:240px;
height:29px
}*/
#fountainG{
position:relative;
filter:Alpha(opacity=30);
-moz-opacity:0.3;
-khtml-opacity:0.3;
opacity:0.3;
background-color:#000;
width:100%;
height:100%;
z-index:;
position:fixed;
left:;
top:;
right:;
bottom:;
display:none;
overflow:hidden;
} .fountainG{
position:absolute;
top:45%;
margin-left: 45%;
background-color:#33cc99;
width:29px;
height:29px;
-webkit-animation:bounce_fountainG 1.3s infinite normal;
-moz-animation:bounce_fountainG 1.3s infinite normal;
-o-animation:bounce_fountainG 1.3s infinite normal;
-ms-animation:bounce_fountainG 1.3s infinite normal;
animation:bounce_fountainG 1.3s infinite normal;
-moz-transform:scale(.3);
-webkit-transform:scale(.3);
-ms-transform:scale(.3);
-o-transform:scale(.3);
transform:scale(.3);
border-radius:19px;
} #fountainG_1{
left:;
-moz-animation-delay:0.52s;
-webkit-animation-delay:0.52s;
-ms-animation-delay:0.52s;
-o-animation-delay:0.52s;
animation-delay:0.52s;
} #fountainG_2{
left:30px;
-moz-animation-delay:0.65s;
-webkit-animation-delay:0.65s;
-ms-animation-delay:0.65s;
-o-animation-delay:0.65s;
animation-delay:0.65s;
} #fountainG_3{
left:60px;
-moz-animation-delay:0.78s;
-webkit-animation-delay:0.78s;
-ms-animation-delay:0.78s;
-o-animation-delay:0.78s;
animation-delay:0.78s;
} #fountainG_4{
left:90px;
-moz-animation-delay:0.91s;
-webkit-animation-delay:0.91s;
-ms-animation-delay:0.91s;
-o-animation-delay:0.91s;
animation-delay:0.91s;
} #fountainG_5{
left:120px;
-moz-animation-delay:1.04s;
-webkit-animation-delay:1.04s;
-ms-animation-delay:1.04s;
-o-animation-delay:1.04s;
animation-delay:1.04s;
} #fountainG_6{
left:150px;
-moz-animation-delay:1.17s;
-webkit-animation-delay:1.17s;
-ms-animation-delay:1.17s;
-o-animation-delay:1.17s;
animation-delay:1.17s;
} #fountainG_7{
left:180px;
-moz-animation-delay:1.3s;
-webkit-animation-delay:1.3s;
-ms-animation-delay:1.3s;
-o-animation-delay:1.3s;
animation-delay:1.3s;
} #fountainG_8{
left:210px;
-moz-animation-delay:1.43s;
-webkit-animation-delay:1.43s;
-ms-animation-delay:1.43s;
-o-animation-delay:1.43s;
animation-delay:1.43s;
} @-moz-keyframes bounce_fountainG{
0%{
-moz-transform:scale(1);
background-color:#33cc99;
} 100%{
-moz-transform:scale(.3);
background-color:#0099cc;
} } @-webkit-keyframes bounce_fountainG{
0%{
-webkit-transform:scale(1);
background-color:#33cc99;
} 100%{
-webkit-transform:scale(.3);
background-color:#0099cc;
} } @-ms-keyframes bounce_fountainG{
0%{
-ms-transform:scale(1);
background-color:#33cc99;
} 100%{
-ms-transform:scale(.3);
background-color:#0099cc;
} } @-o-keyframes bounce_fountainG{
0%{
-o-transform:scale(1);
background-color:#33cc99;
} 100%{
-o-transform:scale(.3);
background-color:#0099cc;
} } @keyframes bounce_fountainG{
0%{
transform:scale(1);
background-color:#33cc99;
} 100%{
transform:scale(.3);
background-color:#0099cc;
} }
html:
<div id="fountainG">
<div id="fountainG_1" class="fountainG">
</div>
<div id="fountainG_2" class="fountainG">
</div>
<div id="fountainG_3" class="fountainG">
</div>
<div id="fountainG_4" class="fountainG">
</div>
<div id="fountainG_5" class="fountainG">
</div>
<div id="fountainG_6" class="fountainG">
</div>
<div id="fountainG_7" class="fountainG">
</div>
<div id="fountainG_8" class="fountainG">
</div>
</div>
js:
//加载动画效果
function showLoad(){
$('#fountainG').show();
}
//隐藏动画效果
function hiddenLoad(){
$('#fountainG').hide();
}
function resultAjax(url, data) {
var result;
$.ajax({
url: $.contextPath() + url,
type: 'get',
async: true, //注意这里
cache: false,
contentType: 'application/json',
data: data,
dataType: 'json',
beforeSend: function (){
//ajax刷新前加载load动画
showLoad();
},
success: function(data) {
//TODO
},
error: function(data) {
commonAlert('出现了一点小问题','error');
},
complete:function () {
//完成以后隐藏load动画
hiddenLoad();
} });
return result;
}
给web请求加遮罩动画的更多相关文章
- 三、js提交请求加载启动动画、请求完成成功回调、注销加载动画
1.通过Query post方式进行异步请求方法 jQuery.post(url, [data], [callback], [type]) 参数说明: url:发送请求地址 data:待发送 Key ...
- 转: web 页面加载速度优化实战-100% 的飞跃提升
前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...
- 加载动画插件spin.js的使用随笔
背景: 在请求后台的“漫长”等待过程中,为了提升用户体验,需要一个类似 的加载动画效果,让用户明确现在处于请求过程中,而不是机子down掉或者网站死了 静态demo(未与后台交互): HTML代码如 ...
- web页面加载速度缓慢,如何优化?
参考博客: https://www.cnblogs.com/xp796/p/5236945.html https://www.cnblogs.com/MarcoHan/p/5295398.html - ...
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- Web请求响应简单整理
简单对Web请求响应如何处理进行的整理,难免有理解不到位,理解有偏差的地方,如有理解有误的地方,希望大牛批评指正. 1.Web开发的定义首先看看微软对Web开发的定义:Web开发是一个指代网页或网 ...
- JAVA Web.xml 加载顺序
web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> ...
- Java web.xml加载顺序
web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener&g ...
随机推荐
- Cocos Creator LabelAtlas(艺术数字的使用)
# 艺术数字资源 (LabelAtlas) **艺术数字资源** 是一种用户自定义的资源,它可以用来配置艺术数字字体的属性. ## 创建艺术数字资源 在 **资源管理器** 中右键,可以在如下菜单中找 ...
- The world is in my hands
Null项 其实我还是比较希望你能理解我的心情 无聊666回味
- git stash pop 冲突,git stash list 中的记录不会自动删除的解决方法
在使用git stash代码时,经常会碰到有冲突的情况,一旦出现冲突的话,系统会认为你的stash没有结束. 导致的结果是git stash list 中的列表依然存在,实际上代码已经pop出来了. ...
- eclipse导出maven工程的可执行jar包
一.eclipse导出maven工程的可执行jar包 建立两个maven工程 ZKServer 和ZKClient 注意:用maven进行开发管理的话,默认的打出来的jar包是不能运行的,需要在pom ...
- 信步漫谈之Git—环境搭建及入门
一.初识Git Git是一套优秀的分布式版本控制系统(区别于SVN和CVS,这两者是集中式版本控制系统).分布式和集中式版本控制系统的区别:1)集中式版本控制系统:版本库是集中存放在中央服务器的,而干 ...
- C#导出文本内容到word文档源码
将做工程过程中较好的代码片段珍藏起来,下面的代码内容是关于C#导出文本内容到word文档的代码,希望能对小伙伴们也有好处.<%@ Page Language="C#" Aut ...
- postgresql 自定义函数
CREATE OR REPLACE FUNCTION "public"."pm25_aqi"("pm25_nd" numeric) RETU ...
- json传实体到后台接受
转自https://www.cnblogs.com/threadj/p/10535760.html 我用第一种是没问题的,第二种还不行,再研究一下 1.json参数为json字符串 var data ...
- docker tmpfs 的测试结果
创建 2G 内存的 Container 使用tmpfs挂载到 /tmp docker run --rm -it --memory 2g --mount type=tmpfs,destination=/ ...
- 安卓GreenDao(基础)
GreenDao的基础使用很简单,网上一大筐,推荐在简书里面搜索,那么我这里要说些什么呢,试想,这些简单的Demo可以带你了解GreenDao,但你能用这些代码做公司的项目么,肯定不行,所以我结合自身 ...