css3实现loading效果
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3实现loading效果相关的知识,希望对你有一定的参考价值。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> @media only screen and (min-width:320px){ .loading, .spinner{ width:30px; height:30px; } .loading{margin-left:-15px; margin-top:-15px;} .container1 > div, .container2 > div, .container3 > div {width: 9px; height: 9px;} } @media only screen and (min-width:640px){ .loading, .spinner{ width:50px; height:50px; } .loading{margin-left:-25px; margin-top:-25px;} .container1 > div, .container2 > div, .container3 > div {width: 15px; height: 15px;} } @media only screen and (min-width:1000px){ .loading, .spinner{ width:80px; height:80px; } .loading{margin-left:-40px; margin-top:-40px;} .container1 > div, .container2 > div, .container3 > div {width: 25px; height: 25px;} } .loading{ position:absolute; top:50%; left:50%;} .spinner { margin: 0 auto; position: relative; } .container1 > div, .container2 > div, .container3 > div { background-color: #1267cb; 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.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } </style> </head> <body> <div class="loading_animate"> </div> <div class="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> </body> </html>
以上是关于css3实现loading效果的主要内容,如果未能解决你的问题,请参考以下文章