请求数据loading

时间：2021-12-24 05:58:56

请求数据加载，CSS3实现

请求数据loading

HTML:

<!--请求数据loading-->

<div class="back_loading">

    <div class="spinner">

        <div class="spinner-container container1">

            <div class="circle1"></div>

            <div class="circle2"></div>

            <div class="circle3"></div>

            <div class="circle4"></div>

        </div>

        <div class="spinner-container container2">

            <div class="circle1"></div>

            <div class="circle2"></div>

            <div class="circle3"></div>

            <div class="circle4"></div>

        </div>

        <div class="spinner-container container3">

            <div class="circle1"></div>

            <div class="circle2"></div>

            <div class="circle3"></div>

            <div class="circle4"></div>

        </div>

    </div>

</div>

CSS:

 /*loading 动画*/

        .back_loading{display: block;width: 100%;height: 100%;background: #000;opacity: 0.5;position: fixed;left:;top:;z-index:;}

        .spinner{margin: 50% auto;width: 50px;height: 50px;position: relative;}

        .container1 > div, .container2 > div, .container3 > div{width: 13px;height: 13px;background-color: #fff;border-radius: 100%;position: absolute;-webkit-animation: bouncedelay 1.2s infinite ease-in-out;animation: bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;}

        .spinner .spinner-container{position: absolute;width: 100%;height: 100%;}

        .container2{-webkit-transform: rotateZ(45deg);transform: rotateZ(45deg);}

        .container3{-webkit-transform: rotateZ(90deg);transform: rotateZ(90deg);}

        .circle1{top:;left:;}

        .circle2{top:;right:;}

        .circle3{right:;bottom:;}

        .circle4{left:;bottom:;}

        .container2 .circle1{-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}

        .container3 .circle1{-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}

        .container1 .circle2{-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}

        .container2 .circle2{-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}

        .container3 .circle2{-webkit-animation-delay: -0.7s;animation-delay: -0.7s;}

        .container1 .circle3{-webkit-animation-delay: -0.6s;animation-delay: -0.6s;}

        .container2 .circle3{-webkit-animation-delay: -0.5s;animation-delay: -0.5s;}

        .container3 .circle3{-webkit-animation-delay: -0.4s;animation-delay: -0.4s;}

        .container1 .circle4{-webkit-animation-delay: -0.3s;animation-delay: -0.3s;}

        .container2 .circle4{-webkit-animation-delay: -0.2s;animation-delay: -0.2s;}

        .container3 .circle4{-webkit-animation-delay: -0.1s;animation-delay: -0.1s;}

        @-webkit-keyframes bouncedelay{0%, 80%, 100%{-webkit-transform: scale(0);}

            40%{-webkit-transform: scale(1);}}

        @keyframes bouncedelay{0%, 80%, 100%{transform: scale(0);-webkit-transform: scale(0);}

            40%{transform: scale(1);-webkit-transform: scale(1);}}

        @media (min-width: 768px){.module_list .o_t_title{font-size: 20px;}}

相关文章