给web请求加遮罩动画

雨点打透心脏的1/2处 2022-10-03 00:33 165阅读 0赞

效果预览：

![1468106-20190403142606032-795435746.png][]

css:

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

/*#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;
        }
    
    }

html:

js:

//加载动画效果
    function showLoad(){
        
        $('#fountainG').show();
    }
    //隐藏动画效果
    function hiddenLoad(){
        
        $('#fountainG').hide();
    }

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

[1468106-20190403142606032-795435746.png]: /images/20220109/3a48551ab457401aa70525b582bd5a5e.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220109/c1d2dd6c4b9e43d887cb92bc640d18f7.png