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