模拟win10系统开机加载的动画

来源：互联网发布：软件图片大全编辑：程序博客网时间：2024/04/28 19:08

模拟win10系统开机加载的动画

直接上代码：

<div class="loadingContainer" style="display: block;"><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部分

.loadingContainer{  width: 100%;  height: 100%;  background: rgba(0, 0, 0, .1);  position: fixed;  top: 0%;  left: 0%;}.spinner {  width: 40px;  height: 40px;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -webkit-transform: translate(-50%, -50%);} .container1 > div, .container2 > div, .container3 > div {  width: 10px;  height: 10px;  background-color: #333;   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);  }}

可以写对象中封装起来，app或者是微信，发出请求到数据返回之间的时间可以显示这个加载状态，以表明此时的状态，挺实用的

0 0