标签: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;}}
标签:css ota alt fill mat out jpg top key
原文地址:https://www.cnblogs.com/liubingyjui/p/10395195.html