css实现多层彩色扇形叠加旋转loading加载动画效果代码-html代码-BFW代码库

css实现多层彩色扇形叠加旋转loading加载动画效果代码

代码语言：html

代码描述：css实现多层彩色扇形叠加旋转loading加载动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        .holder {
      position: absolute;
      left: 0%;
      top: 0%;
      right: 0%;
      bottom: 0%;
      width: 100%;
      height: 100%;
      background-color: #ECE5DF;
    }
    
    .preloader {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 400px;
      height: 400px;
      transform: translateX(-50%) translateY(-50%) rotateX(-45deg);
      transform-style: preserve-3d;
    }
    
    .preloader .circles {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
    
    .preloader .circles div {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0%;
      top: 0%;
      transform: translateX(-50%) translateY(-50%);
      overflow: hidden;
      animation: rotateCircle 1s infinite linear;
      transform-origin: 100% 100%;
    }
    
    .preloader .circles div:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-sizing: border-box;
    }
    
    .preloader .circles div:nth-child(1) {
      left: -11%;
      top: -11%;
      transform-origin: 111% 100%;
      transform: translateX(-50%) translateY(-50%) scale(0.28);
      animation-duration: 0.9s;
      z-index: 9;
      animation-name: rotateCircle1;
      /*opacity: $opacity;*/
      opacity: 0.9;
    }
    
    .preloader .circles div:nth-child(1):before {
      top: 61%;
      left: 61%;
      background-color: #182825;
    }
    
    @keyframes rotateCircle1 {
      0% {
        transform: translateX(-50%) translateY(-50%) scale(0.28) rotateZ(0deg);
      }
      100% {
        transform: translateX(-50%) translateY(-50%) scale(0.28) rotateZ(360deg);
      }
    }
    .preloader .circles div:nth-child(2) {
      left: -7%;
      top: -7%;
      transform-origin: 107% 100%;
      transform: translateX(-50%) translateY(-50%) scale(0.36);
      animation-duration: 1s;
      z-index: 8;
      animation-name: rotateCircle2;
      /*opacity: $opacity;*/
      opacity: 0.9;
    }
    
    .preloader .circles div:nth-child(2):before {
      top: 57%;
      left: 57%;
      background-color: #2C365E;
    }
    
    @keyframes rotateCircle2 {
      0% {
        transform: translateX(-50%) translateY(-50%) scale(0.36) rotateZ(0deg);
      }
      100% {
        transform: translateX(-50%) translateY(-50%) scale(0.36) rotateZ(360deg);
      }
    }
    .preloader .circles div:nth-child(3) {
      left: -3%;
      top: -3%;
      transform-origin: 103% 100%;
      transform: translateX(-50%) translateY(-50%) scale(0.44);
      animation-duration: 1.1s;
      z-index: 7;
      animation-name: rotateCircle3;
      /*opacity: $opacity;*/
      opacity: 0.9;
    }
    
    .preloader .circles div:nth-child(3):before {
      top: 53%;
      left: 53%;
      background-color: #1A936F;
    }
    
    @keyframes rotateCircle3 {
      0% {
        transform: translateX(-50%) translateY(-50%) scale(0.44) rotateZ(0deg);
      }
      100% {
        transform: translateX(-50%) translateY(-50%) scale(0.44) rotateZ(360deg);
      }
    }
    .preloader .circles div:nth-child(4) {
      left: 1%;
      top: 1%;
      transform-origin: 99% 100%;
      transform: translateX(-50%) translateY(-50%) scale(0.52);
      animation-duration: 1.2s;
      z-index: 6;
      animation-name: rotateCircle4;
      /*opacity: $opacity;*/
      opacity: 0.9;
    }
    
    .preloader .circles div:nth-child(4):before {
      top: 49%;
      left: 49%;
      background-color: #F3FFBA;
    }
    
    @keyframes rotateCircle4 {
      0% {
        transform: translateX(-50%) translateY(-50%) scale(0.52) rotateZ(0deg);
      }
      100% {
        transform: translateX(-50%) translateY(-50%) scale(0.52) rotateZ(360deg);
      }
    }
    .preloader .circles div:nth-child(5) {
      left: 5%;
      top: 5%;
      transform-origin: 95% 100%;
      transform: translateX(-50%) translateY(-50%) scale(0.6);
      animation-duration: 1.3s;
      z-index: 5;
   .........完整代码请登录后点击上方下载按钮下载查看