css实现彩色圈圈旋转粒子流loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现彩色圈圈旋转粒子流loading加载动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #000;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.loader {
  position: relative;
  width: 21em;
  height: 21em;
  background-color: #000;
  filter: blur(0.2em) contrast(2);
  -webkit-animation: loaderSpin 16s infinite linear;
          animation: loaderSpin 16s infinite linear;
}
@-webkit-keyframes loaderSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loaderSpin {
  to {
    transform: rotate(360deg);
  }
}
.loader > i {
  position: absolute;
  left: 10em;
  top: 10em;
  width: 1em;
  height: 1em;
  background-color: hsl(var(--hue, 0), 75%, 75%);
  border-radius: 50%;
  transform: rotateZ(var(--rz, 0)) translateY(5em);
  -webkit-animation: iMove 4s var(--delay, 0s) infinite ease-in-out;
          animation: iMove 4s var(--delay, 0s) infinite ease-in-out;
}
@-webkit-keyframes iMove {
  0% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(0);
  }
  2% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(1.25);
  }
  20% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(1.25);
  }
  90%, 100% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(var(--tx, 0), var(--ty, 0)) scale(0);
  }
}
@keyframes iMove {
  0% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(0);
  }
  2% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(1.25);
  }
  20% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(1.25);
  }
  90%, 100% {
    transform: rotateZ(var(--rz, 0)) translateY(4em) translate(var(--tx, 0), var(--ty, 0)) scale(0);
  }
}
.loader > i:nth-child(1) {
  --rz: 0deg;
  --delay: -4s;
  --tx: 1.552em;
  --ty: -1.084em;
  --hue: 0;
}
.loader > i:nth-child(2) {
  --rz: 5deg;
  --delay: -3.9444444444s;
  --tx: 2.016em;
  --ty: -1.02em;
  --hue: 5;
}
.loader > i:nth-child(3) {
  --rz: 10deg;
  --delay: -3.8888888889s;
  --tx: 1.42em;
  --ty: 5.412em;
  --hue: 10;
}
.loader > i:nth-child(4) {
  --rz: 15deg;
  --delay: -3.8333333333s;
  --tx: 2.272em;
  --ty: -2.244em;
  --hue: 15;
}
.loader > i:nth-child(5) {
  --rz: 20deg;
  --delay: -3.7777777778s;
  --tx: 3.716em;
  --ty: 4.908em;
  --hue: 20;
}
.loader > i:nth-child(6) {
  --rz: 25deg;
  --delay: -3.7222222222s;
  --tx: 1.436em;
  --ty: 2.812em;
  --hue: 25;
}
.loader > i:nth-child(7) {
  --rz: 30deg;
  --delay: -3.6666666667s;
  --tx: 1.148em;
  --ty: -1.108em;
  --hue: 30;
}
.loader > i:nth-child(8) {
  --rz: 35deg;
  --delay: -3.6111111111s;
  --tx: 2.2em;
  --ty: 2.396em;
  --hue: 35;
}
.loader > i:nth-child(9) {
  --rz: 40deg;
  --delay: -3.5555555556s;
  --tx: 1.184em;
  --ty: -2.012em;
  --hue: 40;
}
.loader > i:nth-child(10) {
  --rz: 45deg;
  --delay: -3.5s;
  --tx: 2.928em;
  --ty: 0.676em;
  --hue: 45;
}
.loader > i:nth-child(11) {
  --rz: 50deg;
  --delay: -3.4444444444s;
  --tx: 3.476em;
  --ty: 1.676em;
  --hue: 50;
}
.loader > i:nth-child(12) {
  --rz: 55deg;
  --delay: -3.3888888889s;
  --tx: 3.188em;
  --ty: 2.972em;
  --hue: 55;
}
.loader > i:nth-child(13) {
  --rz: 60deg;
  --delay: -3.3333333333s;
  --tx: 1.216em;
  --ty: -0.652em;
  --hue: 60;
}
.loader > i:nth-child(14) {
  --rz: 65deg;
  --delay: -3.2777777778s;
  --tx: 2.776em;
  --ty: -1.124em;
  --hue: 65;
}
.loader > i:nth-child(15) {
  --rz: 70deg;
  --delay: -3.2222222222s;
  --tx: 3.808em;
  --ty: 2.188em;
  --hue: 70;
}
.loader > i:nth-child(16) {
  --rz: 75deg;
  --delay: -3.1666666667s;
  --tx: 0.56em;
  --ty: 3.404em;
  --hue: 75;
}
.loader > i:nth-child(17) {
  --rz: 80deg;
  --delay: -3.1111111111s;
  --tx: 3.836em;
  --ty: 3.972em;
  --hue: 80;
}
.loader > i:nth-child(18) {
  --rz: 85deg;
  --delay: -3.0555555556s;
  --tx: 3.968em;
  --ty: -0.772em;
  --hue: 85;
}
.loader > i:nth-child(19) {
  --rz: 90deg;
  --delay: -3s;
  --tx: 1.768em;
  --ty: 1.684em;
  --hue: 90;
}
.loader > i:nth-child(20) {
  --rz: 95deg;
  --delay: -2.9444444444s;
  --tx: 3.62em;
  --ty: 1.54em;
  --hue: 95;
}
.loader > i:nth-child(21) {
  --rz: 100deg;
  --delay: -2.8888888889s;
  --tx: 1.5em;
  --ty: 3.916em;
  --hue: 100;
}
.loader > i:nth-child(22) {
  --rz: 105deg;
  --delay: -2.8333333333s;
  --tx: 0.416em;
  --ty: 3.916em;
  --hue: 105;
}
.loader > i:nth-child(23) {
  --rz: 110deg;
  --delay: -2.7777777778s;
  --tx: 0.16em;
  --ty: -0.788em;
  --hue: 110;
}
.loader > i:nth-child(24) {
  --rz: 115deg;
  --delay: -2.7222222222s;
  --tx: 3.324em;
  --ty: 2.908em;
  --hue: 115;
}
.loader > i:nth-child(25) {
  --rz: 120deg;
  --delay: -2.6666666667s;
  --tx: 3.856em;
  --ty: 0.46em;
  --hue: 120;
}
.loader > i:nth-child(26) {
  --rz: 125deg;
  --delay: -2.6111111111s;
  --tx: 1.528em;
  --ty: 3.948em;
  --hue: 125;
}
.loader > i:nth-child(27) {
  --rz: 130deg;
  --delay: -2.5555555556s;
  --tx: 2.808em;
  --ty: 4.644em;
  --hue: 130;
}
.loader > i:nth-child(28) {
  --rz: 135deg;
  --delay: -2.5s;
  --tx: 0.796em;
  --ty: -1.22em;
  --hue: 135;
}
.loader > i:nth-child(29) {
  --rz: 140deg;
  --delay: -2.4444444444s;
  --tx: 1.612em;
  --ty: 3.596em;
  --hue: 140;
}
.loader > i:nth-child(30) {
  --rz: 145deg;
  --delay: -2.3888888889s;
  --tx: 3.896em;
  --ty: 3.556em;
  --hue: 145;
}
.loader > i:nth-child(31) {
  --rz: 150deg;
  --delay: -2.3333333333s;
  --tx: 1.24em;
  --ty: 3.964em;
  --hue: 150;
}
.loader > i:nth-child(32) {
  --rz: 155deg;
  --delay: -2.2777777778s;
  --tx: 0.516em;
  --ty: 2.812em;
  --hue: 155;
}
.loader > i:nth-child(33) {
  --rz: 160deg;
  --delay: -2.2222222222s;
  --tx: 0.888em;
  --ty: 1.964em;
  --hue: 160;
}
.loader > i:nth-child(34) {
  --rz: 165deg;
  --delay: -2.1666666667s;
  --tx: 2.036em;
  --ty: 4.596em;
  --hue: 165;
}
.loader > i:nth-child(35) {
  --rz: 170deg;
  --delay: -2.1111111111s.........完整代码请登录后点击上方下载按钮下载查看