div+css实现炫酷多彩圈圈旋转层叠loading加载动画效果代码-html代码-BFW代码库

div+css实现炫酷多彩圈圈旋转层叠loading加载动画效果代码

代码语言：html

代码描述：div+css实现炫酷多彩圈圈旋转层叠loading加载动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">


  
  
<style>
*, *::after, *::before {
  box-sizing: border-box;
}
:root {
  --aqua:  #7FDBFF;
  --blue:  #0074D9;
  --navy:  #001F3F;
  --teal:  #39CCCC;
  --green: #2ECC40;
  --olive: #3D9970;
  --lime:  #01FF70;

  --yellow:  #FFDC00;
  --orange:  #FF851B;
  --red:     #FF4136;
  --fuchsia: #F012BE;
  --purple:  #B10DC9;
  --maroon:  #85144B;

  --white:  #FFFFFF;
  --silver: #DDDDDD;
  --gray:   #AAAAAA;
  --black:  #111111;
}
html {
  background: #111;
  height: 100%;
}
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.stack {
  display: grid;
  grid-template-areas: 'stack';
}
.blobs {
  display: grid;
  grid-template-areas: 'stack';
  position: relative;
  -webkit-animation: spin infinite 5s linear;
          animation: spin infinite 5s linear;
  grid-area: stack;
}
.blob--filtered {
}
.blob {
  --border-radius: 115% 140% 145% 110% / 125% 140% 110% 125%;
  --border-width: 5vmin;
  
  aspect-ratio: 1;
  display: block;
  grid-area: stack;
  background-size: calc(100% + var(--border-width) * 2);
  background-repeat: no-repeat;
  background-position: center;
  border: var(--border-width) solid transparent;
  border-radius: var(--border-radius, 50%);
  -webkit-mask-image:
    linear-gradient(transparent, transparent),
    linear-gradient(black, white)
  ;
          mask-image:
    linear-gradient(transparent, transparent),
    linear-gradient(black, wh.........完整代码请登录后点击上方下载按钮下载查看