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