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.........完整代码请登录后点击上方下载按钮下载查看