效果預(yù)覽：

?

?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:1200;position:fixed;left:0;top:0;right:0;bottom:0;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:0;-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;}} View Code

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:

//加載動(dòng)畫效果
function showLoad(){
$('#fountainG').show();
}
//隱藏動(dòng)畫效果
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動(dòng)畫 showLoad();},success: function(data) {//TODO },error: function(data) {commonAlert('出現(xiàn)了一點(diǎn)小問題','error');},complete:function () {//完成以后隱藏load動(dòng)畫 hiddenLoad();}});return result; }

?

轉(zhuǎn)載于:https://www.cnblogs.com/UncleWang001/p/10648634.html

總結(jié)

以上是生活随笔為你收集整理的给web请求加遮罩动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。