div+css实现多彩粒子转圈loading加载动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css实现多彩粒子转圈loading加载动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  
  
<style>
body, html {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  background: #000;
}

:root {
  --headerColor: #87d400;
}

.g-container {
  position: relative;
  width: 300px;
  height: 300px;
  padding: 100px;
  filter: contrast(8);
  background: #000;
  -webkit-animation: rotate 4s infinite linear;
          animation: rotate 4s infinite linear;
}

.g-circle {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: conic-gradient(var(--headerColor), #00bcd4, #00bcd4 30%, #00bcd4 35%, transparent 35%);
  -webkit-mask: radial-gradient(transparent, transparent 119px, #000 120px, #000);
          mask: radial-gradient(transparent, transparent 119px, #000 120px, #000);
  filter: blur(5px);
}
.g-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
  background: var(--headerColor);
  top: 0;
  left: calc(50% - 15px);
  border-radius: 50%;
}

.g-bubbles {
  position: absolute;
  width: 33px;
  height: 33px;
  border-radius: 50px;
  right: 126px;
  top: 314px;
  background: #00bcd4;
  filter: blur(3px);
}

.g-bubble {
  position: absolute;
  border-radius: 50%;
  background-color: #00bcd4;
}

.g-bubble:nth-child(1) {
  --rotate: calc(152 * 1deg);
  --dis: calc(97 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  -webkit-animation: move 1.671s ease-in-out -2.335s infinite;
          animation: move 1.671s ease-in-out -2.335s infinite;
}

.g-bubble:nth-child(2) {
  --rotate: calc(297 * 1deg);
  --dis: calc(88 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  -webkit-animation: move 2.717s ease-in-out -1.586s infinite;
          animation: move 2.717s ease-in-out -1.586s infinite;
}

.g-bubble:nth-child(3) {
  --rotate: calc(295 * 1deg);
  --dis: calc(109 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  -webkit-animation: move 2.696s ease-in-out -0.837s infinite;
          animation: move 2.696s ease-in-out -0.837s infinite;
}

.g-bubble:nth-child(4) {
  --rotate: calc(187 * 1deg);
  --dis: calc(75 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  -webkit-animation: move 2.13s ease-in-out -0.005s infinite;
          animation: move 2.13s ease-in-out -0.005s infinite;
}

.g-bubble:nth-child(5) {
  --rotate: calc(252 * 1deg);
  --dis: calc(53 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 19px;
  -webkit-animation: move 1.903s ease-in-out -2.326s infinite;
          animation: move 1.903s ease-in-out -2.326s infinite;
}

.g-bubble:nth-child(6) {
  --rotate: calc(78 * 1deg);
  --dis: calc(39 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  -webkit-animation: move 2.343s ease-in-out -2.855s infinite;
          animation: move 2.343s ease-in-out -2.855s infinite;
}

.g-bubble:nth-child(7) {
  --rotate: calc(127 * 1deg);
  --dis: calc(78 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  -webkit-animation: move 2.626s ease-in-out -2.56s infinite;
          animation: move 2.626s ease-in-out -2.56s infinite;
}

.g-bubble:nth-child(8) {
  --rotate: calc(39 * 1deg);
  --dis: calc(42 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  -webkit-animation: move 1.712s ease-in-out -2.866s infinite;
          animation: move 1.712s ease-in-out -2.866s infinite;
}

.g-bubble:nth-child(9) {
  --rotate: calc(108 * 1deg);
  --dis: calc(6 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  -webkit-animation: move 1.938s ease-in-out -1.205s infinite;
          animation: move 1.938s ease-in-out -1.205s infinite;
}

.g-bubble:nth-child(10) {
  --rotate: calc(358 * 1deg);
  --dis: calc(116 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  -webkit-animation: move 2.527s ease-in-out -1.835s infinite;
          animation: move 2.527s ease-in-out -1.835s infinite;
}

.g-bubble:nth-child(11) {
  --rotate: calc(354 * 1deg);
  --dis: calc(45 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  -webkit-animation: move 1.538s ease-in-out -0.912s infinite;
          animation: move 1.538s ease-in-out -0.912s infinite;
}

.g-bubble:nth-child(12) {
  --rotate: calc(319 * 1deg);
  --dis: calc(46 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  -webkit-animation: move 2.98s ease-in-out -1.48s infinite;
          animation: move 2.98s ease-in-out -1.48s infinite;
}

.g-bubble:nth-child(13) {
  --rotate: calc(307 * 1deg);
  --dis: calc(111 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  -webkit-animation: move 2.18s ease-in-out -0.588s infinite;
          animation: move 2.18s ease-in-out -0.588s infinite;
}

.g-bubble:nth-child(14) {
  --rotate: calc(11 * 1deg);
  --dis: calc(111 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
  -webkit-animation: move 2.313s ease-in-out -1.621s infinite;
          animation: move 2.313s ease-in-out -1.621s infinite;
}

.g-bubble:nth-child(15) {
  --rotate: calc(23 * 1deg);
  --dis: calc(86 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  -webkit-animation: move 1.507s ease-in-out -1.767s infinite;
          animation: move 1.507s ease-in-out -1.767s infinite;
}

.g-bubble:nth-child(16) {
  --rotate: calc(231 * 1deg);
  --dis: calc(144 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
  -webkit-animation: move 2.052s ease-in-out -1.159s infinite;
          animation: move 2.052s ease-in-out -1.159s infinite;
}

.g-bubble:nth-child(17) {
  --rotate: calc(9 * 1deg);
  --dis: calc(79 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 19px;
  -webkit-animation: move 2.671s ease-in-out -2.866s infinite;
          animation: move 2.671s ease-in-out -2.866s infinite;
}

.g-bubble:nth-child(18) {
  --rotate: calc(295 * 1deg);
  --dis: calc(33 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
  -webkit-animation: move 2.677s ease-in-out -0.604s infinite;
          animation: move 2.677s ease-in-out -0.604s infinite;
}

.g-bubble:nth-child(19) {
  --rotate: calc(77 * 1deg);
  --dis: calc(83 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  -webkit-animation: move 2.225s ease-in-out -0.24s infinite;
          animation: move 2.225s ease-in-out -0.24s infinite;
}

.g-bubble:nth-child(20) {
  --rotate: calc(111 * 1deg);
  --dis: calc(22 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  -webkit-animation: move 1.553s ease-in-out -0.554s infinite;
          animation: move 1.553s ease-in-out -0.554s infinite;
}

.g-bubble:nth-child(21) {
  --rotate: calc(329 * 1deg);
  --dis: calc(20 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  -webkit-animation: move 2.085s ease-in-out -2.035s infinite;
          animation: move 2.085s ease-in-out -2.035s infinite;
}

.g-bubble:nth-child(22) {
  --rotate: calc(51 * 1deg);
  --dis: calc(11 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  -webkit-animation: move 1.808s ease-in-out -2.871s infinite;
          animation: move 1.808s ease-in-out -2.871s infinite;
}

.g-bubble:nth-child(23) {
  --rotate: calc(17 * 1deg);
  --dis: calc(106 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  -webkit-animation: move 1.547s ease-in-out -1.346s infinite;
          animation: move 1.547s ease-in-out -1.346s infinite;
}

.g-bubble:nth-child(24) {
  --rotate: calc(69 * 1deg);
  --dis: calc(113 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 19px;
  -webkit-animation: move 2.164s ease-in-out -2.441s infinite;
          animation: move 2.164s ease-in-out -2.441s infinite;
}

.g-bubble:nth-child(25) {
  --rotate: calc(130 * 1deg);
  --dis: calc(14 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  -webkit-animation: move 1.912s ease-in-out -1.773s infinite;
          animation: move 1.912s ease-in-out -1.773s infinite;
}

.g-bubble:nth-child(26) {
  --rotate: calc(344 * 1deg);
  --dis: calc(136 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  -webkit-animation: move 2.904s ease-in-out -1.719s infinite;
          animation: move 2.904s ease-in-out -1.719s infinite;
}

.g-bubble:nth-child(27) {
  --rotate: calc(282 * 1deg);
  --dis: calc(8 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  -webkit-animation: move 2.291s ease-in-out -1.321s infinite;
          animation: move 2.291s ease-in-out -1.321s infinite;
}

.g-bubble:nth-child(28) {
  --rotate: calc(310 * 1deg);
  --dis: calc(129 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  -webkit-animation: move 1.567s ease-in-out -2.329s infinite;
          animation: move 1.567s ease-in-out -2.329s infinite;
}

.g-bubble:nth-child(29) {
  --rotate: calc(143 * 1deg);
  --dis: calc(20 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  -webkit-animation: move 1.89s ease-in-out -1.131s infinite;
          animation: move 1.89s ease-in-out -1.131s infinite;
}

.g-bubble:nth-child(30) {
  --rotate: calc(36 * 1deg);
  --dis: calc(12 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 19px;
  -webkit-animation: move 1.615s ease-in-out -0.917s infinite;
          animation: move 1.615s ease-in-out -0.917s infinite;
}

.g-bubble:nth-child(31) {
  --rotate: calc(131 * 1deg);
  --dis: calc(87 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  -webkit-animation: move 1.724s ease-in-out -0.317s infinite;
          animation: move 1.724s ease-in-out -0.317s infinite;
}

.g-bubble:nth-child(32) {
  --rotate: calc(259 * 1deg);
  --dis: calc(40 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  -webkit-animation: move 2.507s ease-in-out -1.661s infinite;
          animation: move 2.507s ease-in-out -1.661s infinite;
}

.g-bubble:nth-child(33) {
  --rotate: calc(309 * 1deg);
  --dis: calc(103 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  -webkit-animation: move 2.732s ease-in-out -0.769s infinite;
          animation: move 2.732s ease-in-out -0.769s infinite;
}

.g-bubble:nth-child(34) {
  --rotate: calc(41 * 1deg);
  --dis: calc(51 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  -webkit-animation: move 2.05s ease-in-out -2.567s infinite;
          animation: move 2.05s ease-in-out -2.567s infinite;
}

.g-bubble:nth-child(35) {
  --rotate: calc(196 * 1deg);
  --dis: calc(146 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  -webkit-animation: move 2.342s ease-in-out -2.134s infinite;
          animation: move 2.342s ease-in-out -2.134s infinite;
}

.g-bubble:nth-child(36) {
  --rotate: calc(329 * 1deg);
  --dis: calc(48 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  -webkit-animation: move 2.12s ease-in-out -1.695s infinite;
          animation: move 2.12s ease-in-out -1.695s infinite;
}

.g-bubble:nth-child(37) {
  --rotate: calc(3 * 1deg);
  --dis: calc(107 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  -webkit-animation: move 1.728s ease-in-out -1.61s infinite;
          animation: move 1.728s ease-in-out -1.61s infinite;
}

.g-bubble:nth-child(38) {
  --rotate: calc(62 * 1deg);
  --dis: calc(46 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  -webkit-animation: move 1.871s ease-in-out -2.862s infinite;
          animation: move 1.871s ease-in-out -2.862s infinite;
}

.g-bubble:nth-child(39) {
  --rotate: calc(236 * 1deg);
  --dis: calc(28 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
  -webkit-animation: move 2.567s ease-in-out -2.378s infinite;
          animation: move 2.567s ease-in-out -2.378s infinite;
}

.g-bubble:nth-child(40) {
  --rotate: calc(316 * 1deg);
  --dis: calc(31 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  -webkit-animation: move 2.392s ease-in-out -1.28s infinite;
          animation: move 2.392s ease-in-out -1.28s infinite;
}

.g-bubble:nth-child(41) {
  --rotate: calc(73 * 1deg);
  --dis: calc(32 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  -webkit-animation: move 1.895s ease-in-out -2.589s infinite;
          animation: move 1.895s ease-in-out -2.589s infinite;
}

.g-bubble:nth-child(42) {
  --rotate: calc(306 * 1deg);
  --dis: calc(41 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  -webkit-animation: move 2.742s ease-in-out -0.533s infinite;
          animation: move 2.742s ease-in-out -0.533s infinite;
}

.g-bubble:nth-child(43) {
  --rotate: calc(141 * 1deg);
  --dis: calc(61 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 19px;
  height: 19px;
  -webkit-animation: move 1.804s ease-in-out -2.882s infinite;
          animation: move 1.804s ease-in-out -2.882s infinite;
}

.g-bubble:nth-child(44) {
  --rotate: calc(183 * 1deg);
  --dis: calc(25 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
  height: 17px;
  -webkit-animation: move 1.669s ease-in-out -2.13s infinite;
          animation: move 1.669s ease-in-out -2.13s infinite;
}

.g-bubble:nth-child(45) {
  --rotate: calc(145 * 1deg);
  --dis: calc(43 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  -webkit-animation: move 1.827s ease-in-out -2.411s infinite;
          animation: move 1.827s ease-in-out -2.411s infinite;
}

.g-bubble:nth-child(46) {
  --rotate: calc(292 * 1deg);
  --dis: calc(34 * 1px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  -webkit-animation: move 2.017s ease-in-out -2.506s infinite;
          animation: move 2.017s ease-in-out -2.506s infinite;
}

.g-bubble:nth-child(47) {
  --rotate: calc(199 * 1deg);
  --dis: cal.........完整代码请登录后点击上方下载按钮下载查看