码迷,mamicode.com
首页 > 其他好文 > 详细

请求数据loading

时间:2019-02-18 14:55:40      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:css   ota   alt   fill   mat   out   jpg   top   key   

请求数据加载,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

标签:css   ota   alt   fill   mat   out   jpg   top   key   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!