首页 > 其他 > 详细

请求数据loading

时间:2019-02-18 14:33:59      阅读:155      评论:0      收藏:0      [点我收藏+]

请求数据加载,CSS3实现

技术分享图片

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: 0;top: 0;z-index: 99999;}
        .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: 0;left: 0;}
        .circle2{top: 0;right: 0;}
        .circle3{right: 0;bottom: 0;}
        .circle4{left: 0;bottom: 0;}
        .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;}}

 

请求数据loading

原文:https://www.cnblogs.com/liubingyjui/p/10395195.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!