给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: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:

//加载动画效果
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;
}

 

转载于:https://www.cnblogs.com/UncleWang001/p/10648634.html