纯css实现三维球体运动效果-html代码-BFW代码库

代码语言：html
所属分类：粒子
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-perspective: 600px;
          perspective: 600px;
}

div {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.circle {
  -webkit-transform: scale3d(0.8, 0.8, 0.8);
          transform: scale3d(0.8, 0.8, 0.8);
}

.camera.-x {
  -webkit-animation: rotateX 10000ms linear infinite;
          animation: rotateX 10000ms linear infinite;
}
.camera.-y {
  -webkit-animation: rotateY 10000ms linear infinite;
          animation: rotateY 10000ms linear infinite;
}
.camera.-z {
  -webkit-animation: rotateZ 10000ms linear infinite;
          animation: rotateZ 10000ms linear infinite;
}

.camerafollow.-x {
  animation: rotateX 10000ms linear infinite reverse;
}
.camerafollow.-y {
  animation: rotateY 10000ms linear infinite reverse;
}
.camerafollow.-z {
  animation: rotateZ 10000ms linear infinite reverse;
}

.part {
  position: absolute;
  top: 50%;
  left: calc(50% + 200px);
}

.graphic {
  position: absolute;
  width: 20px;
  height: 20px;
  background: linear-gradient(0deg, #555555 0%, white 100%);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.rotate {
  animation: rotateY 10000ms linear infinite reverse;
}

.rotatefollow {
  -webkit-animation: rotateY 10000ms linear infinite;
          animation: rotateY 10000ms linear infinite;
}

.particle:nth-child(1) .part {
  left: calc(50% + 229px);
  -webkit-animation: slide 3950ms -16329ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3950ms -16329ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(1) .rotate,
.particle:nth-child(1) .rotatefollow {
  -webkit-animation-delay: -16329ms;
          animation-delay: -16329ms;
  -webkit-animation-duration: 9331ms;
          animation-duration: 9331ms;
}
.particle:nth-child(1) .graphic {
  background: linear-gradient(0deg, #3e4c8c 0%, #a2b0f0 100%);
  -webkit-animation: amplitude 3000ms -16329ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -16329ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(1) .graphic::before {
  background: linear-gradient(0deg, rgba(112, 126, 190, 0) 50%, rgba(112, 126, 190, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -16329ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -16329ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(2) .part {
  left: calc(50% + 207px);
  -webkit-animation: slide 4628ms -17862ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4628ms -17862ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(2) .rotate,
.particle:nth-child(2) .rotatefollow {
  -webkit-animation-delay: -17862ms;
          animation-delay: -17862ms;
  -webkit-animation-duration: 5896ms;
          animation-duration: 5896ms;
}
.particle:nth-child(2) .graphic {
  background: linear-gradient(0deg, #777b79 0%, #dbdfdd 100%);
  -webkit-animation: amplitude 3000ms -17862ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -17862ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(2) .graphic::before {
  background: linear-gradient(0deg, rgba(169, 173, 171, 0) 50%, rgba(169, 173, 171, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -17862ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -17862ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(3) .part {
  left: calc(50% + 162px);
  -webkit-animation: slide 3195ms -20562ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3195ms -20562ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(3) .rotate,
.particle:nth-child(3) .rotatefollow {
  -webkit-animation-delay: -20562ms;
          animation-delay: -20562ms;
  -webkit-animation-duration: 6933ms;
          animation-duration: 6933ms;
}
.particle:nth-child(3) .graphic {
  background: linear-gradient(0deg, #955153 0%, #f9b5b7 100%);
  -webkit-animation: amplitude 3000ms -20562ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -20562ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(3) .graphic::before {
  background: linear-gradient(0deg, rgba(199, 131, 133, 0) 50%, rgba(199, 131, 133, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -20562ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -20562ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(4) .part {
  left: calc(50% + 209px);
  -webkit-animation: slide 3508ms -17535ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3508ms -17535ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(4) .rotate,
.particle:nth-child(4) .rotatefollow {
  -webkit-animation-delay: -17535ms;
          animation-delay: -17535ms;
  -webkit-animation-duration: 8030ms;
          animation-duration: 8030ms;
}
.particle:nth-child(4) .graphic {
  background: linear-gradient(0deg, #467fb6 0%, #aae3ff 100%);
  -webkit-animation: amplitude 3000ms -17535ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -17535ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(4) .graphic::before {
  background: linear-gradient(0deg, rgba(120, 177, 232, 0) 50%, rgba(120, 177, 232, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -17535ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -17535ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(5) .part {
  left: calc(50% + 143px);
  -webkit-animation: slide 3718ms -19239ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3718ms -19239ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(5) .rotate,
.particle:nth-child(5) .rotatefollow {
  -webkit-animation-delay: -19239ms;
          animation-delay: -19239ms;
  -webkit-animation-duration: 7517ms;
          animation-duration: 7517ms;
}
.particle:nth-child(5) .graphic {
  background: linear-gradient(0deg, #7336a9 0%, #d79aff 100%);
  -webkit-animation: amplitude 3000ms -19239ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -19239ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(5) .graphic::before {
  background: linear-gradient(0deg, rgba(165, 104, 219, 0) 50%, rgba(165, 104, 219, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -19239ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -19239ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(6) .part {
  left: calc(50% + 242px);
  -webkit-animation: slide 3360ms -16135ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3360ms -16135ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(6) .rotate,
.particle:nth-child(6) .rotatefollow {
  -webkit-animation-delay: -16135ms;
          animation-delay: -16135ms;
  -webkit-animation-duration: 11258ms;
          animation-duration: 11258ms;
}
.particle:nth-child(6) .graphic {
  background: linear-gradient(0deg, #67459e 0%, #cba9ff 100%);
  -webkit-animation: amplitude 3000ms -16135ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -16135ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(6) .graphic::before {
  background: linear-gradient(0deg, rgba(153, 119, 208, 0) 50%, rgba(153, 119, 208, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -16135ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -16135ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(7) .part {
  left: calc(50% + 184px);
  -webkit-animation: slide 4786ms -18068ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4786ms -18068ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(7) .rotate,
.particle:nth-child(7) .rotatefollow {
  -webkit-animation-delay: -18068ms;
          animation-delay: -18068ms;
  -webkit-animation-duration: 10195ms;
          animation-duration: 10195ms;
}
.particle:nth-child(7) .graphic {
  background: linear-gradient(0deg, #8d6177 0%, #f1c5db 100%);
  -webkit-animation: amplitude 3000ms -18068ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -18068ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(7) .graphic::before {
  background: linear-gradient(0deg, rgba(191, 147, 169, 0) 50%, rgba(191, 147, 169, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -18068ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -18068ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(8) .part {
  left: calc(50% + 190px);
  -webkit-animation: slide 4524ms -16018ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4524ms -16018ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(8) .rotate,
.particle:nth-child(8) .rotatefollow {
  -webkit-animation-delay: -16018ms;
          animation-delay: -16018ms;
  -webkit-animation-duration: 11975ms;
          animation-duration: 11975ms;
}
.particle:nth-child(8) .graphic {
  background: linear-gradient(0deg, #76727f 0%, #dad6e3 100%);
  -webkit-animation: amplitude 3000ms -16018ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -16018ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(8) .graphic::before {
  background: linear-gradient(0deg, rgba(168, 164, 177, 0) 50%, rgba(168, 164, 177, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -16018ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -16018ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(9) .part {
  left: calc(50% + 163px);
  -webkit-animation: slide 2512ms -19285ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2512ms -19285ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(9) .rotate,
.particle:nth-child(9) .rotatefollow {
  -webkit-animation-delay: -19285ms;
          animation-delay: -19285ms;
  -webkit-animation-duration: 13500ms;
          animation-duration: 13500ms;
}
.particle:nth-child(9) .graphic {
  background: linear-gradient(0deg, #496aa8 0%, #adceff 100%);
  -webkit-animation: amplitude 3000ms -19285ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -19285ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(9) .graphic::before {
  background: linear-gradient(0deg, rgba(123, 156, 218, 0) 50%, rgba(123, 156, 218, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -19285ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -19285ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(10) .part {
  left: calc(50% + 167px);
  -webkit-animation: slide 4521ms -22863ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4521ms -22863ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(10) .rotate,
.particle:nth-child(10) .rotatefollow {
  -webkit-animation-delay: -22863ms;
          animation-delay: -22863ms;
  -webkit-animation-duration: 13609ms;
          animation-duration: 13609ms;
}
.particle:nth-child(10) .graphic {
  background: linear-gradient(0deg, #7b38c0 0%, #df9cff 100%);
  -webkit-animation: amplitude 3000ms -22863ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -22863ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(10) .graphic::before {
  background: linear-gradient(0deg, rgba(173, 106, 242, 0) 50%, rgba(173, 106, 242, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -22863ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -22863ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(11) .part {
  left: calc(50% + 187px);
  -webkit-animation: slide 3063ms -17687ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3063ms -17687ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(11) .rotate,
.particle:nth-child(11) .rotatefollow {
  -webkit-animation-delay: -17687ms;
          animation-delay: -17687ms;
  -webkit-animation-duration: 8329ms;
          animation-duration: 8329ms;
}
.particle:nth-child(11) .graphic {
  background: linear-gradient(0deg, #625086 0%, #c6b4ea 100%);
  -webkit-animation: amplitude 3000ms -17687ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -17687ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(11) .graphic::before {
  background: linear-gradient(0deg, rgba(148, 130, 184, 0) 50%, rgba(148, 130, 184, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -17687ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -17687ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(12) .part {
  left: calc(50% + 233px);
  -webkit-animation: slide 4023ms -23823ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4023ms -23823ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(12) .rotate,
.particle:nth-child(12) .rotatefollow {
  -webkit-animation-delay: -23823ms;
          animation-delay: -23823ms;
  -webkit-animation-duration: 14742ms;
          animation-duration: 14742ms;
}
.particle:nth-child(12) .graphic {
  background: linear-gradient(0deg, #6753af 0%, #cbb7ff 100%);
  -webkit-animation: amplitude 3000ms -23823ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -23823ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(12) .graphic::before {
  background: linear-gradient(0deg, rgba(153, 133, 225, 0) 50%, rgba(153, 133, 225, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -23823ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -23823ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(13) .part {
  left: calc(50% + 189px);
  -webkit-animation: slide 3765ms -16941ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3765ms -16941ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(13) .rotate,
.particle:nth-child(13) .rotatefollow {
  -webkit-animation-delay: -16941ms;
          animation-delay: -16941ms;
  -webkit-animation-duration: 6234ms;
          animation-duration: 6234ms;
}
.particle:nth-child(13) .graphic {
  background: linear-gradient(0deg, #75659b 0%, #d9c9ff 100%);
  -webkit-animation: amplitude 3000ms -16941ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -16941ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(13) .graphic::before {
  background: linear-gradient(0deg, rgba(167, 151, 205, 0) 50%, rgba(167, 151, 205, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -16941ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -16941ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(14) .part {
  left: calc(50% + 199px);
  -webkit-animation: slide 2746ms -16311ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2746ms -16311ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(14) .rotate,
.particle:nth-child(14) .rotatefollow {
  -webkit-animation-delay: -16311ms;
          animation-delay: -16311ms;
  -webkit-animation-duration: 12040ms;
          animation-duration: 12040ms;
}
.particle:nth-child(14) .graphic {
  background: linear-gradient(0deg, #52423d 0%, #b6a6a1 100%);
  -webkit-animation: amplitude 3000ms -16311ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -16311ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(14) .graphic::before {
  background: linear-gradient(0deg, rgba(132, 116, 111, 0) 50%, rgba(132, 116, 111, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -16311ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -16311ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(15) .part {
  left: calc(50% + 163px);
  -webkit-animation: slide 2523ms -19710ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2523ms -19710ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(15) .rotate,
.particle:nth-child(15) .rotatefollow {
  -webkit-animation-delay: -19710ms;
          animation-delay: -19710ms;
  -webkit-animation-duration: 6668ms;
          animation-duration: 6668ms;
}
.particle:nth-child(15) .graphic {
  background: linear-gradient(0deg, #8b93bf 0%, #eff7ff 100%);
  -webkit-animation: amplitude 3000ms -19710ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -19710ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(15) .graphic::before {
  background: linear-gradient(0deg, rgba(189, 197, 241, 0) 50%, rgba(189, 197, 241, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -19710ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -19710ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(16) .part {
  left: calc(50% + 225px);
  -webkit-animation: slide 2391ms -17084ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2391ms -17084ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(16) .rotate,
.particle:nth-child(16) .rotatefollow {
  -webkit-animation-delay: -17084ms;
          animation-delay: -17084ms;
  -webkit-animation-duration: 14556ms;
          animation-duration: 14556ms;
}
.particle:nth-child(16) .graphic {
  background: linear-gradient(0deg, #925d48 0%, #f6c1ac 100%);
  -webkit-animation: amplitude 3000ms -17084ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -17084ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(16) .graphic::before {
  background: linear-gradient(0deg, rgba(196, 143, 122, 0) 50%, rgba(196, 143, 122, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -17084ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -17084ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(17) .part {
  left: calc(50% + 168px);
  -webkit-animation: slide 4938ms -24713ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4938ms -24713ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(17) .rotate,
.particle:nth-child(17) .rotatefollow {
  -webkit-animation-delay: -24713ms;
          animation-delay: -24713ms;
  -webkit-animation-duration: 6579ms;
          animation-duration: 6579ms;
}
.particle:nth-child(17) .graphic {
  background: linear-gradient(0deg, #437095 0%, #a7d4f9 100%);
  -webkit-animation: amplitude 3000ms -24713ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -24713ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(17) .graphic::before {
  background: linear-gradient(0deg, rgba(117, 162, 199, 0) 50%, rgba(117, 162, 199, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -24713ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -24713ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(18) .part {
  left: calc(50% + 150px);
  -webkit-animation: slide 4105ms -16798ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4105ms -16798ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(18) .rotate,
.particle:nth-child(18) .rotatefollow {
  -webkit-animation-delay: -16798ms;
          animation-delay: -16798ms;
  -webkit-animation-duration: 11755ms;
          animation-duration: 11755ms;
}
.particle:nth-child(18) .graphic {
  background: linear-gradient(0deg, #343a7b 0%, #989edf 100%);
  -webkit-animation: amplitude 3000ms -16798ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -16798ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(18) .graphic::before {
  background: linear-gradient(0deg, rgba(102, 108, 173, 0) 50%, rgba(102, 108, 173, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -16798ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -16798ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(19) .part {
  left: calc(50% + 244px);
  -webkit-animation: slide 4417ms -22497ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4417ms -22497ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(19) .rotate,
.particle:nth-child(19) .rotatefollow {
  -webkit-animation-delay: -22497ms;
          animation-delay: -22497ms;
  -webkit-animation-duration: 6893ms;
          animation-duration: 6893ms;
}
.particle:nth-child(19) .graphic {
  background: linear-gradient(0deg, #46913f 0%, #aaf5a3 100%);
  -webkit-animation: amplitude 3000ms -22497ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -22497ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(19) .graphic::before {
  background: linear-gradient(0deg, rgba(120, 195, 113, 0) 50%, rgba(120, 195, 113, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -22497ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -22497ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(20) .part {
  left: calc(50% + 186px);
  -webkit-animation: slide 2739ms -18211ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2739ms -18211ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(20) .rotate,
.particle:nth-child(20) .rotatefollow {
  -webkit-animation-delay: -18211ms;
          animation-delay: -18211ms;
  -webkit-animation-duration: 11632ms;
          animation-duration: 11632ms;
}
.particle:nth-child(20) .graphic {
  background: linear-gradient(0deg, #5943b8 0%, #bda7ff 100%);
  -webkit-animation: amplitude 3000ms -18211ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -18211ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(20) .graphic::before {
  background: linear-gradient(0deg, rgba(139, 117, 234, 0) 50%, rgba(139, 117, 234, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -18211ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -18211ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(21) .part {
  left: calc(50% + 248px);
  -webkit-animation: slide 4026ms -15847ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4026ms -15847ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(21) .rotate,
.particle:nth-child(21) .rotatefollow {
  -webkit-animation-delay: -15847ms;
          animation-delay: -15847ms;
  -webkit-animation-duration: 8116ms;
          animation-duration: 8116ms;
}
.particle:nth-child(21) .graphic {
  background: linear-gradient(0deg, #3d55c4 0%, #a1b9ff 100%);
  -webkit-animation: amplitude 3000ms -15847ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -15847ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(21) .graphic::before {
  background: linear-gradient(0deg, rgba(111, 135, 246, 0) 50%, rgba(111, 135, 246, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -15847ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -15847ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(22) .part {
  left: calc(50% + 193px);
  -webkit-animation: slide 2002ms -20109ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2002ms -20109ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(22) .rotate,
.particle:nth-child(22) .rotatefollow {
  -webkit-animation-delay: -20109ms;
          animation-delay: -20109ms;
  -webkit-animation-duration: 14715ms;
          animation-duration: 14715ms;
}
.particle:nth-child(22) .graphic {
  background: linear-gradient(0deg, #637a6e 0%, #c7ded2 100%);
  -webkit-animation: amplitude 3000ms -20109ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -20109ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(22) .graphic::before {
  background: linear-gradient(0deg, rgba(149, 172, 160, 0) 50%, rgba(149, 172, 160, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -20109ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -20109ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(23) .part {
  left: calc(50% + 167px);
  -webkit-animation: slide 2422ms -17569ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2422ms -17569ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(23) .rotate,
.particle:nth-child(23) .rotatefollow {
  -webkit-animation-delay: -17569ms;
          animation-delay: -17569ms;
  -webkit-animation-duration: 8472ms;
          animation-duration: 8472ms;
}
.particle:nth-child(23) .graphic {
  background: linear-gradient(0deg, #515e7d 0%, #b5c2e1 100%);
  -webkit-animation: amplitude 3000ms -17569ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -17569ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(23) .graphic::before {
  background: linear-gradient(0deg, rgba(131, 144, 175, 0) 50%, rgba(131, 144, 175, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -17569ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -17569ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(24) .part {
  left: calc(50% + 155px);
  -webkit-animation: slide 4777ms -22905ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4777ms -22905ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(24) .rotate,
.particle:nth-child(24) .rotatefollow {
  -webkit-animation-delay: -22905ms;
          animation-delay: -22905ms;
  -webkit-animation-duration: 8725ms;
          animation-duration: 8725ms;
}
.particle:nth-child(24) .graphic {
  background: linear-gradient(0deg, #506d4e 0%, #b4d1b2 100%);
  -webkit-animation: amplitude 3000ms -22905ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -22905ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(24) .graphic::before {
  background: linear-gradient(0deg, rgba(130, 159, 128, 0) 50%, rgba(130, 159, 128, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -22905ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -22905ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(25) .part {
  left: calc(50% + 170px);
  -webkit-animation: slide 4658ms -17322ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4658ms -17322ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(25) .rotate,
.particle:nth-child(25) .rotatefollow {
  -webkit-animation-delay: -17322ms;
          animation-delay: -17322ms;
  -webkit-animation-duration: 13093ms;
          animation-duration: 13093ms;
}
.particle:nth-child(25) .graphic {
  background: linear-gradient(0deg, #6995c4 0%, #cdf9ff 100%);
  -webkit-animation: amplitude 3000ms -17322ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -17322ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(25) .graphic::before {
  background: linear-gradient(0deg, rgba(155, 199, 246, 0) 50%, rgba(155, 199, 246, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -17322ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -17322ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(26) .part {
  left: calc(50% + 153px);
  -webkit-animation: slide 4969ms -19005ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4969ms -19005ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(26) .rotate,
.particle:nth-child(26) .rotatefollow {
  -webkit-animation-delay: -19005ms;
          animation-delay: -19005ms;
  -webkit-animation-duration: 12411ms;
          animation-duration: 12411ms;
}
.particle:nth-child(26) .graphic {
  background: linear-gradient(0deg, #4a5134 0%, #aeb598 100%);
  -webkit-animation: amplitude 3000ms -19005ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -19005ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(26) .graphic::before {
  background: linear-gradient(0deg, rgba(124, 131, 102, 0) 50%, rgba(124, 131, 102, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -19005ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -19005ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(27) .part {
  left: calc(50% + 127px);
  -webkit-animation: slide 2465ms -21010ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2465ms -21010ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(27) .rotate,
.particle:nth-child(27) .rotatefollow {
  -webkit-animation-delay: -21010ms;
          animation-delay: -21010ms;
  -webkit-animation-duration: 8638ms;
          animation-duration: 8638ms;
}
.particle:nth-child(27) .graphic {
  background: linear-gradient(0deg, #535685 0%, #b7bae9 100%);
  -webkit-animation: amplitude 3000ms -21010ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -21010ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(27) .graphic::before {
  background: linear-gradient(0deg, rgba(133, 136, 183, 0) 50%, rgba(133, 136, 183, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -21010ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -21010ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(28) .part {
  left: calc(50% + 233px);
  -webkit-animation: slide 3660ms -20073ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3660ms -20073ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(28) .rotate,
.particle:nth-child(28) .rotatefollow {
  -webkit-animation-delay: -20073ms;
          animation-delay: -20073ms;
  -webkit-animation-duration: 7887ms;
          animation-duration: 7887ms;
}
.particle:nth-child(28) .graphic {
  background: linear-gradient(0deg, #426c36 0%, #a6d09a 100%);
  -webkit-animation: amplitude 3000ms -20073ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -20073ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(28) .graphic::before {
  background: linear-gradient(0deg, rgba(116, 158, 104, 0) 50%, rgba(116, 158, 104, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -20073ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -20073ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(29) .part {
  left: calc(50% + 205px);
  -webkit-animation: slide 3768ms -15974ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3768ms -15974ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(29) .rotate,
.particle:nth-child(29) .rotatefollow {
  -webkit-animation-delay: -15974ms;
          animation-delay: -15974ms;
  -webkit-animation-duration: 6135ms;
          animation-duration: 6135ms;
}
.particle:nth-child(29) .graphic {
  background: linear-gradient(0deg, #77797b 0%, #dbdddf 100%);
  -webkit-animation: amplitude 3000ms -15974ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -15974ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(29) .graphic::before {
  background: linear-gradient(0deg, rgba(169, 171, 173, 0) 50%, rgba(169, 171, 173, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -15974ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -15974ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(30) .part {
  left: calc(50% + 241px);
  -webkit-animation: slide 2381ms -24007ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2381ms -24007ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(30) .rotate,
.particle:nth-child(30) .rotatefollow {
  -webkit-animation-delay: -24007ms;
          animation-delay: -24007ms;
  -webkit-animation-duration: 9722ms;
          animation-duration: 9722ms;
}
.particle:nth-child(30) .graphic {
  background: linear-gradient(0deg, #4e3540 0%, #b299a4 100%);
  -webkit-animation: amplitude 3000ms -24007ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -24007ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(30) .graphic::before {
  background: linear-gradient(0deg, rgba(128, 103, 114, 0) 50%, rgba(128, 103, 114, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -24007ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -24007ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(31) .part {
  left: calc(50% + 135px);
  -webkit-animation: slide 3492ms -24020ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3492ms -24020ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(31) .rotate,
.particle:nth-child(31) .rotatefollow {
  -webkit-animation-delay: -24020ms;
          animation-delay: -24020ms;
  -webkit-animation-duration: 8771ms;
          animation-duration: 8771ms;
}
.particle:nth-child(31) .graphic {
  background: linear-gradient(0deg, #616fc8 0%, #c5d3ff 100%);
  -webkit-animation: amplitude 3000ms -24020ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -24020ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(31) .graphic::before {
  background: linear-gradient(0deg, rgba(147, 161, 250, 0) 50%, rgba(147, 161, 250, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -24020ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -24020ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(32) .part {
  left: calc(50% + 147px);
  -webkit-animation: slide 3229ms -15976ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3229ms -15976ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(32) .rotate,
.particle:nth-child(32) .rotatefollow {
  -webkit-animation-delay: -15976ms;
          animation-delay: -15976ms;
  -webkit-animation-duration: 14482ms;
          animation-duration: 14482ms;
}
.particle:nth-child(32) .graphic {
  background: linear-gradient(0deg, #6275c3 0%, #c6d9ff 100%);
  -webkit-animation: amplitude 3000ms -15976ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -15976ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(32) .graphic::before {
  background: linear-gradient(0deg, rgba(148, 167, 245, 0) 50%, rgba(148, 167, 245, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -15976ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -15976ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(33) .part {
  left: calc(50% + 153px);
  -webkit-animation: slide 4242ms -16871ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4242ms -16871ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(33) .rotate,
.particle:nth-child(33) .rotatefollow {
  -webkit-animation-delay: -16871ms;
          animation-delay: -16871ms;
  -webkit-animation-duration: 9085ms;
          animation-duration: 9085ms;
}
.particle:nth-child(33) .graphic {
  background: linear-gradient(0deg, #524e88 0%, #b6b2ec 100%);
  -webkit-animation: amplitude 3000ms -16871ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -16871ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(33) .graphic::before {
  background: linear-gradient(0deg, rgba(132, 128, 186, 0) 50%, rgba(132, 128, 186, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -16871ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -16871ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(34) .part {
  left: calc(50% + 109px);
  -webkit-animation: slide 3080ms -15460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3080ms -15460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(34) .rotate,
.particle:nth-child(34) .rotatefollow {
  -webkit-animation-delay: -15460ms;
          animation-delay: -15460ms;
  -webkit-animation-duration: 12618ms;
          animation-duration: 12618ms;
}
.particle:nth-child(34) .graphic {
  background: linear-gradient(0deg, #87558a 0%, #ebb9ee 100%);
  -webkit-animation: amplitude 3000ms -15460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -15460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(34) .graphic::before {
  background: linear-gradient(0deg, rgba(185, 135, 188, 0) 50%, rgba(185, 135, 188, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -15460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -15460ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(35) .part {
  left: calc(50% + 233px);
  -webkit-animation: slide 3520ms -23641ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3520ms -23641ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(35) .rotate,
.particle:nth-child(35) .rotatefollow {
  -webkit-animation-delay: -23641ms;
          animation-delay: -23641ms;
  -webkit-animation-duration: 8085ms;
          animation-duration: 8085ms;
}
.particle:nth-child(35) .graphic {
  background: linear-gradient(0deg, #7e61c3 0%, #e2c5ff 100%);
  -webkit-animation: amplitude 3000ms -23641ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -23641ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(35) .graphic::before {
  background: linear-gradient(0deg, rgba(176, 147, 245, 0) 50%, rgba(176, 147, 245, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -23641ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -23641ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(36) .part {
  left: calc(50% + 119px);
  -webkit-animation: slide 2801ms -21860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2801ms -21860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(36) .rotate,
.particle:nth-child(36) .rotatefollow {
  -webkit-animation-delay: -21860ms;
          animation-delay: -21860ms;
  -webkit-animation-duration: 11395ms;
          animation-duration: 11395ms;
}
.particle:nth-child(36) .graphic {
  background: linear-gradient(0deg, #686e88 0%, #ccd2ec 100%);
  -webkit-animation: amplitude 3000ms -21860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -21860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(36) .graphic::before {
  background: linear-gradient(0deg, rgba(154, 160, 186, 0) 50%, rgba(154, 160, 186, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -21860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -21860ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(37) .part {
  left: calc(50% + 132px);
  -webkit-animation: slide 2046ms -19090ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2046ms -19090ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(37) .rotate,
.particle:nth-child(37) .rotatefollow {
  -webkit-animation-delay: -19090ms;
          animation-delay: -19090ms;
  -webkit-animation-duration: 12224ms;
          animation-duration: 12224ms;
}
.particle:nth-child(37) .graphic {
  background: linear-gradient(0deg, #5b829e 0%, #bfe6ff 100%);
  -webkit-animation: amplitude 3000ms -19090ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -19090ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(37) .graphic::before {
  background: linear-gradient(0deg, rgba(141, 180, 208, 0) 50%, rgba(141, 180, 208, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -19090ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -19090ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(38) .part {
  left: calc(50% + 238px);
  -webkit-animation: slide 2259ms -16779ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2259ms -16779ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(38) .rotate,
.particle:nth-child(38) .rotatefollow {
  -webkit-animation-delay: -16779ms;
          animation-delay: -16779ms;
  -webkit-animation-duration: 11053ms;
          animation-duration: 11053ms;
}
.particle:nth-child(38) .graphic {
  background: linear-gradient(0deg, #887265 0%, #ecd6c9 100%);
  -webkit-animation: amplitude 3000ms -16779ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -16779ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(38) .graphic::before {
  background: linear-gradient(0deg, rgba(186, 164, 151, 0) 50%, rgba(186, 164, 151, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -16779ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -16779ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(39) .part {
  left: calc(50% + 204px);
  -webkit-animation: slide 4970ms -15771ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4970ms -15771ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(39) .rotate,
.particle:nth-child(39) .rotatefollow {
  -webkit-animation-delay: -15771ms;
          animation-delay: -15771ms;
  -webkit-animation-duration: 8375ms;
          animation-duration: 8375ms;
}
.particle:nth-child(39) .graphic {
  background: linear-gradient(0deg, #8a4254 0%, #eea6b8 100%);
  -webkit-animation: amplitude 3000ms -15771ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -15771ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(39) .graphic::before {
  background: linear-gradient(0deg, rgba(188, 116, 134, 0) 50%, rgba(188, 116, 134, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -15771ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -15771ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(40) .part {
  left: calc(50% + 242px);
  -webkit-animation: slide 2679ms -15394ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2679ms -15394ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(40) .rotate,
.particle:nth-child(40) .rotatefollow {
  -webkit-animation-delay: -15394ms;
          animation-delay: -15394ms;
  -webkit-animation-duration: 14525ms;
          animation-duration: 14525ms;
}
.particle:nth-child(40) .graphic {
  background: linear-gradient(0deg, #644f58 0%, #c8b3bc 100%);
  -webkit-animation: amplitude 3000ms -15394ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -15394ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(40) .graphic::before {
  background: linear-gradient(0deg, rgba(150, 129, 138, 0) 50%, rgba(150, 129, 138, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -15394ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -15394ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(41) .part {
  left: calc(50% + 180px);
  -webkit-animation: slide 3306ms -18368ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 3306ms -18368ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(41) .rotate,
.particle:nth-child(41) .rotatefollow {
  -webkit-animation-delay: -18368ms;
          animation-delay: -18368ms;
  -webkit-animation-duration: 9481ms;
          animation-duration: 9481ms;
}
.particle:nth-child(41) .graphic {
  background: linear-gradient(0deg, #576c7f 0%, #bbd0e3 100%);
  -webkit-animation: amplitude 3000ms -18368ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -18368ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(41) .graphic::before {
  background: linear-gradient(0deg, rgba(137, 158, 177, 0) 50%, rgba(137, 158, 177, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -18368ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -18368ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(42) .part {
  left: calc(50% + 183px);
  -webkit-animation: slide 4838ms -16664ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4838ms -16664ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(42) .rotate,
.particle:nth-child(42) .rotatefollow {
  -webkit-animation-delay: -16664ms;
          animation-delay: -16664ms;
  -webkit-animation-duration: 6998ms;
          animation-duration: 6998ms;
}
.particle:nth-child(42) .graphic {
  background: linear-gradient(0deg, #3879b3 0%, #9cddff 100%);
  -webkit-animation: amplitude 3000ms -16664ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -16664ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(42) .graphic::before {
  background: linear-gradient(0deg, rgba(106, 171, 229, 0) 50%, rgba(106, 171, 229, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -16664ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -16664ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(43) .part {
  left: calc(50% + 230px);
  -webkit-animation: slide 2746ms -20400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2746ms -20400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(43) .rotate,
.particle:nth-child(43) .rotatefollow {
  -webkit-animation-delay: -20400ms;
          animation-delay: -20400ms;
  -webkit-animation-duration: 6502ms;
          animation-duration: 6502ms;
}
.particle:nth-child(43) .graphic {
  background: linear-gradient(0deg, #476876 0%, #abccda 100%);
  -webkit-animation: amplitude 3000ms -20400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -20400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(43) .graphic::before {
  background: linear-gradient(0deg, rgba(121, 154, 168, 0) 50%, rgba(121, 154, 168, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -20400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -20400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(44) .part {
  left: calc(50% + 145px);
  -webkit-animation: slide 4826ms -24379ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4826ms -24379ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(44) .rotate,
.particle:nth-child(44) .rotatefollow {
  -webkit-animation-delay: -24379ms;
          animation-delay: -24379ms;
  -webkit-animation-duration: 9214ms;
          animation-duration: 9214ms;
}
.particle:nth-child(44) .graphic {
  background: linear-gradient(0deg, #795082 0%, #ddb4e6 100%);
  -webkit-animation: amplitude 3000ms -24379ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -24379ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(44) .graphic::before {
  background: linear-gradient(0deg, rgba(171, 130, 180, 0) 50%, rgba(171, 130, 180, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -24379ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -24379ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(45) .part {
  left: calc(50% + 146px);
  -webkit-animation: slide 4369ms -22062ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 4369ms -22062ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(45) .rotate,
.particle:nth-child(45) .rotatefollow {
  -webkit-animation-delay: -22062ms;
          animation-delay: -22062ms;
  -webkit-animation-duration: 12492ms;
          animation-duration: 12492ms;
}
.particle:nth-child(45) .graphic {
  background: linear-gradient(0deg, #3d47bc 0%, #a1abff 100%);
  -webkit-animation: amplitude 3000ms -22062ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitude 3000ms -22062ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(45) .graphic::before {
  background: linear-gradient(0deg, rgba(111, 121, 238, 0) 50%, rgba(111, 121, 238, 0.3) 100%);
  -webkit-animation: amplitudeShadow 3000ms -22062ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: amplitudeShadow 3000ms -22062ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
}
.particle:nth-child(46) .part {
  left: calc(50% + 198px);
  -webkit-animation: slide 2033ms -21066ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate;
          animation: slide 2033ms -21066ms cubic-bezier(0.445, .........完整代码请登录后点击上方下载按钮下载查看