给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