纯css实现水波旋转效果-html代码-BFW代码库

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

<title>Only CSS: Infinite Wave 🏄</title>
<style>
      body {
  background: #000;
  height: 100vh;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.human {
  position: absolute;
  top: calc(50% - 250px);
  left: calc(50% - 1em);
  font-size: 3rem;
}
.human_shake.o-x {
  -webkit-animation: 2500ms shakeX ease-in-out infinite alternate;
          animation: 2500ms shakeX ease-in-out infinite alternate;
}
.human_shake.o-y {
  -webkit-animation: 1000ms shakeY ease-in-out infinite alternate;
          animation: 1000ms shakeY ease-in-out infinite alternate;
}

.water {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-filter: blur(10px) contrast(500) hue-rotate(40deg);
          filter: blur(10px) contrast(500) hue-rotate(40deg);
}

.pool {
  position: absolute;
}
.pool_wrapper:nth-child(1) {
  -webkit-animation: rotate 13889ms -20000ms linear infinite;
          animation: rotate 13889ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(1) .pool {
  top: calc(50% - 367px / 2);
  left: calc(50% - 367px / 2);
  width: 367px;
  height: 367px;
  border: 8px solid #6465b3;
  border-radius: 84% 16% 25% 75% / 30% 91% 9% 70%;
}
.pool_wrapper:nth-child(2) {
  -webkit-animation: rotate 13849ms -20000ms linear infinite;
          animation: rotate 13849ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(2) .pool {
  top: calc(50% - 408px / 2);
  left: calc(50% - 408px / 2);
  width: 408px;
  height: 408px;
  border: 8px solid #64bbc4;
  border-radius: 67% 33% 37% 63% / 62% 63% 37% 38%;
}
.pool_wrapper:nth-child(3) {
  -webkit-animation: rotate 10081ms -20000ms linear infinite;
          animation: rotate 10081ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(3) .pool {
  top: calc(50% - 376px / 2);
  left: calc(50% - 376px / 2);
  width: 376px;
  height: 376px;
  border: 8px solid #648a6e;
  border-radius: 22% 78% 66% 34% / 77% 35% 65% 23%;
}
.pool_wrapper:nth-child(4) {
  -webkit-animation: rotate 8416ms -20000ms linear infinite;
          animation: rotate 8416ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(4) .pool {
  top: calc(50% - 389px / 2);
  left: calc(50% - 389px / 2);
  width: 389px;
  height: 389px;
  border: 8px solid #64b9b7;
  border-radius: 83% 17% 57% 43% / 33% 83% 17% 67%;
}
.pool_wrapper:nth-child(5) {
  -webkit-animation: rotate 7300ms -20000ms linear infinite;
          animation: rotate 7300ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(5) .pool {
  top: calc(50% - 489px / 2);
  left: calc(50% - 489px / 2);
  width: 489px;
  height: 489px;
  border: 8px solid #64d67b;
  border-radius: 77% 23% 27% 73% / 98% 29% 71% 2%;
}
.pool_wrapper:nth-child(6) {
  -webkit-animation: rotate 8418ms -20000ms linear infinite;
          animation: rotate 8418ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(6) .pool {
  top: calc(50% - 357px / 2);
  left: calc(50% - 357px / 2);
  width: 357px;
  height: 357px;
  border: 8px solid #64ee3f;
  border-radius: 54% 46% 42% 58% / 21% 63% 37% 79%;
}
.pool_wrapper:nth-child(7) {
  -webkit-animation: rotate 14528ms -20000ms linear infinite;
          animation: rotate 14528ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(7) .pool {
  top: calc(50% - 459px / 2);
  left: calc(50% - 459px / 2);
  width: 459px;
  height: 459px;
  border: 8px solid #64b4b8;
  border-radius: 64% 36% 59% 41% / 77% 55% 45% 23%;
}
.pool_wrapper:nth-child(8) {
  -webkit-animation: rotate 14180ms -20000ms linear infinite;
          animation: rotate 14180ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(8) .pool {
  top: calc(50% - 533px / 2);
  left: calc(50% - 533px / 2);
  width: 533px;
  height: 533px;
  border: 8px solid #64ff5d;
  border-radius: 97% 3% 81% 19% / 60% 44% 56% 40%;
}
.pool_wrapper:nth-child(9) {
  -webkit-animation: rotate 13824ms -20000ms linear infinite;
          animation: rotate 13824ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(9) .pool {
  top: calc(50% - 449px / 2);
  left: calc(50% - 449px / 2);
  width: 449px;
  height: 449px;
  border: 8px solid #648293;
  border-radius: 43% 57% 87% 13% / 28% 58% 42% 72%;
}
.pool_wrapper:nth-child(10) {
  -webkit-animation: rotate 6560ms -20000ms linear infinite;
          animation: rotate 6560ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(10) .pool {
  top: calc(50% - 408px / 2);
  left: calc(50% - 408px / 2);
  width: 408px;
  height: 408px;
  border: 8px solid #64c787;
  border-radius: 33% 67% 85% 15% / 61% 58% 42% 39%;
}
.pool_wrapper:nth-child(11) {
  -webkit-animation: rotate 14486ms -20000ms linear infinite;
          animation: rotate 14486ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(11) .pool {
  top: calc(50% - 382px / 2);
  left: calc(50% - 382px / 2);
  width: 382px;
  height: 382px;
  border: 8px solid #647477;
  border-radius: 36% 64% 66% 34% / 53% 75% 25% 47%;
}
.pool_wrapper:nth-child(12) {
  -webkit-animation: rotate 11202ms -20000ms linear infinite;
          animation: rotate 11202ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(12) .pool {
  top: calc(50% - 493px / 2);
  left: calc(50% - 493px / 2);
  width: 493px;
  height: 493px;
  border: 8px solid #64b892;
  border-radius: 78% 22% 29% 71% / 34% 52% 48% 66%;
}
.pool_wrapper:nth-child(13) {
  -webkit-animation: rotate 5636ms -20000ms linear infinite;
          animation: rotate 5636ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(13) .pool {
  top: calc(50% - 532px / 2);
  left: calc(50% - 532px / 2);
  width: 532px;
  height: 532px;
  border: 8px solid #649c8e;
  border-radius: 25% 75% 55% 45% / 88% 64% 36% 12%;
}
.pool_wrapper:nth-child(14) {
  -webkit-animation: rotate 5551ms -20000ms linear infinite;
          animation: rotate 5551ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(14) .pool {
  top: calc(50% - 497px / 2);
  left: calc(50% - 497px / 2);
  width: 497px;
  height: 497px;
  border: 8px solid #64989d;
  border-radius: 53% 47% 86% 14% / 81% 94% 6% 19%;
}
.pool_wrapper:nth-child(15) {
  -webkit-animation: rotate 6169ms -20000ms linear infinite;
          animation: rotate 6169ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(15) .pool {
  top: calc(50% - 496px / 2);
  left: calc(50% - 496px / 2);
  width: 496px;
  height: 496px;
  border: 8px solid #64f877;
  border-radius: 56% 44% 72% 28% / 59% 88% 12% 41%;
}
.pool_wrapper:nth-child(16) {
  -webkit-animation: rotate 14632ms -20000ms linear infinite;
          animation: rotate 14632ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(16) .pool {
  top: calc(50% - 511px / 2);
  left: calc(50% - 511px / 2);
  width: 511px;
  height: 511px;
  border: 8px solid #648fa2;
  border-radius: 42% 58% 61% 39% / 60% 26% 74% 40%;
}
.pool_wrapper:nth-child(17) {
  -webkit-animation: rotate 14846ms -20000ms linear infinite;
          animation: rotate 14846ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(17) .pool {
  top: calc(50% - 326px / 2);
  left: calc(50% - 326px / 2);
  width: 326px;
  height: 326px;
  border: 8px solid #64d53c;
  border-radius: 75% 25% 23% 77% / 68% 74% 26% 32%;
}
.pool_wrapper:nth-child(18) {
  -webkit-animation: rotate 10114ms -20000ms linear infinite;
          animation: rotate 10114ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(18) .pool {
  top: calc(50% - 504px / 2);
  left: calc(50% - 504px / 2);
  width: 504px;
  height: 504px;
  border: 8px solid #64bc43;
  border-radius: 55% 45% 95% 5% / 90% 36% 64% 10%;
}
.pool_wrapper:nth-child(19) {
  -webkit-animation: rotate 10506ms -20000ms linear infinite;
          animation: rotate 10506ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(19) .pool {
  top: calc(50% - 513px / 2);
  left: calc(50% - 513px / 2);
  width: 513px;
  height: 513px;
  border: 8px solid #64dd9b;
  border-radius: 34% 66% 76% 24% / 51% 72% 28% 49%;
}
.pool_wrapper:nth-child(20) {
  -webkit-animation: rotate 12938ms -20000ms linear infinite;
          animation: rotate 12938ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(20) .pool {
  top: calc(50% - 358px / 2);
  left: calc(50% - 358px / 2);
  width: 358px;
  height: 358px;
  border: 8px solid #64f69a;
  border-radius: 85% 15% 33% 67% / 91% 62% 38% 9%;
}
.pool_wrapper:nth-child(21) {
  -webkit-animation: rotate 13198ms -20000ms linear infinite;
          animation: rotate 13198ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(21) .pool {
  top: calc(50% - 382px / 2);
  left: calc(50% - 382px / 2);
  width: 382px;
  height: 382px;
  border: 8px solid #649177;
  border-radius: 69% 31% 56% 44% / 36% 73% 27% 64%;
}
.pool_wrapper:nth-child(22) {
  -webkit-animation: rotate 7171ms -20000ms linear infinite;
          animation: rotate 7171ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(22) .pool {
  top: calc(50% - 395px / 2);
  left: calc(50% - 395px / 2);
  width: 395px;
  height: 395px;
  border: 8px solid #64f44f;
  border-radius: 85% 15% 75% 25% / 37% 77% 23% 63%;
}
.pool_wrapper:nth-child(23) {
  -webkit-animation: rotate 10293ms -20000ms linear infinite;
          animation: rotate 10293ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(23) .pool {
  top: calc(50% - 451px / 2);
  left: calc(50% - 451px / 2);
  width: 451px;
  height: 451px;
  border: 8px solid #64c83f;
  border-radius: 63% 37% 63% 37% / 91% 92% 8% 9%;
}
.pool_wrapper:nth-child(24) {
  -webkit-animation: rotate 11657ms -20000ms linear infinite;
          animation: rotate 11657ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(24) .pool {
  top: calc(50% - 517px / 2);
  left: calc(50% - 517px / 2);
  width: 517px;
  height: 517px;
  border: 8px solid #64e43b;
  border-radius: 65% 35% 59% 41% / 26% 56% 44% 74%;
}
.pool_wrapper:nth-child(25) {
  -webkit-animation: rotate 12604ms -20000ms linear infinite;
          animation: rotate 12604ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(25) .pool {
  top: calc(50% - 415px / 2);
  left: calc(50% - 415px / 2);
  width: 415px;
  height: 415px;
  border: 8px solid #64b264;
  border-radius: 36% 64% 50% 50% / 64% 67% 33% 36%;
}
.pool_wrapper:nth-child(26) {
  -webkit-animation: rotate 7737ms -20000ms linear infinite;
          animation: rotate 7737ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(26) .pool {
  top: calc(50% - 427px / 2);
  left: calc(50% - 427px / 2);
  width: 427px;
  height: 427px;
  border: 8px solid #6466bb;
  border-radius: 93% 7% 44% 56% / 31% 29% 71% 69%;
}
.pool_wrapper:nth-child(27) {
  -webkit-animation: rotate 13392ms -20000ms linear infinite;
          animation: rotate 13392ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(27) .pool {
  top: calc(50% - 384px / 2);
  left: calc(50% - 384px / 2);
  width: 384px;
  height: 384px;
  border: 8px solid #64ae72;
  border-radius: 93% 7% 72% 28% / 58% 85% 15% 42%;
}
.pool_wrapper:nth-child(28) {
  -webkit-animation: rotate 5170ms -20000ms linear infinite;
          animation: rotate 5170ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(28) .pool {
  top: calc(50% - 456px / 2);
  left: calc(50% - 456px / 2);
  width: 456px;
  height: 456px;
  border: 8px solid #64fabf;
  border-radius: 37% 63% 67% 33% / 85% 56% 44% 15%;
}
.pool_wrapper:nth-child(29) {
  -webkit-animation: rotate 8388ms -20000ms linear infinite;
          animation: rotate 8388ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(29) .pool {
  top: calc(50% - 549px / 2);
  left: calc(50% - 549px / 2);
  width: 549px;
  height: 549px;
  border: 8px solid #64a04d;
  border-radius: 22% 78% 29% 71% / 67% 93% 7% 33%;
}
.pool_wrapper:nth-child(30) {
  -webkit-animation: rotate 8080ms -20000ms linear infinite;
          animation: rotate 8080ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(30) .pool {
  top: calc(50% - 516px / 2);
  left: calc(50% - 516px / 2);
  width: 516px;
  height: 516px;
  border: 8px solid #64e24d;
  border-radius: 34% 66% 77% 23% / 50% 42% 58% 50%;
}
.pool_wrapper:nth-child(31) {
  -webkit-animation: rotate 8413ms -20000ms linear infinite;
          animation: rotate 8413ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(31) .pool {
  top: calc(50% - 487px / 2);
  left: calc(50% - 487px / 2);
  width: 487px;
  height: 487px;
  border: 8px solid #64eec5;
  border-radius: 78% 22% 50% 50% / 94% 91% 9% 6%;
}
.pool_wrapper:nth-child(32) {
  -webkit-animation: rotate 9174ms -20000ms linear infinite;
          animation: rotate 9174ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(32) .pool {
  top: calc(50% - 480px / 2);
  left: calc(50% - 480px / 2);
  width: 480px;
  height: 480px;
  border: 8px solid #64c18a;
  border-radius: 81% 19% 58% 42% / 23% 69% 31% 77%;
}
.pool_wrapper:nth-child(33) {
  -webkit-animation: rotate 12921ms -20000ms linear infinite;
          animation: rotate 12921ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(33) .pool {
  top: calc(50% - 451px / 2);
  left: calc(50% - 451px / 2);
  width: 451px;
  height: 451px;
  border: 8px solid #6489a8;
  border-radius: 70% 30% 47% 53% / 43% 85% 15% 57%;
}
.pool_wrapper:nth-child(34) {
  -webkit-animation: rotate 14758ms -20000ms linear infinite;
          animation: rotate 14758ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(34) .pool {
  top: calc(50% - 459px / 2);
  left: calc(50% - 459px / 2);
  width: 459px;
  height: 459px;
  border: 8px solid #64d864;
  border-radius: 74% 26% 58% 42% / 54% 45% 55% 46%;
}
.pool_wrapper:nth-child(35) {
  -webkit-animation: rotate 10990ms -20000ms linear infinite;
          animation: rotate 10990ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(35) .pool {
  top: calc(50% - 466px / 2);
  left: calc(50% - 466px / 2);
  width: 466px;
  height: 466px;
  border: 8px solid #64f454;
  border-radius: 37% 63% 96% 4% / 68% 33% 67% 32%;
}
.pool_wrapper:nth-child(36) {
  -webkit-animation: rotate 14746ms -20000ms linear infinite;
          animation: rotate 14746ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(36) .pool {
  top: calc(50% - 347px / 2);
  left: calc(50% - 347px / 2);
  width: 347px;
  height: 347px;
  border: 8px solid #64bd4d;
  border-radius: 49% 51% 74% 26% / 72% 90% 10% 28%;
}
.pool_wrapper:nth-child(37) {
  -webkit-animation: rotate 10752ms -20000ms linear infinite;
          animation: rotate 10752ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(37) .pool {
  top: calc(50% - 506px / 2);
  left: calc(50% - 506px / 2);
  width: 506px;
  height: 506px;
  border: 8px solid #64e0b0;
  border-radius: 27% 73% 68% 32% / 75% 91% 9% 25%;
}
.pool_wrapper:nth-child(38) {
  -webkit-animation: rotate 6286ms -20000ms linear infinite;
          animation: rotate 6286ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(38) .pool {
  top: calc(50% - 483px / 2);
  left: calc(50% - 483px / 2);
  width: 483px;
  height: 483px;
  border: 8px solid #64748f;
  border-radius: 31% 69% 85% 15% / 59% 98% 2% 41%;
}
.pool_wrapper:nth-child(39) {
  -webkit-animation: rotate 11435ms -20000ms linear infinite;
          animation: rotate 11435ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(39) .pool {
  top: calc(50% - 395px / 2);
  left: calc(50% - 395px / 2);
  width: 395px;
  height: 395px;
  border: 8px solid #649762;
  border-radius: 96% 4% 79% 21% / 24% 37% 63% 76%;
}
.pool_wrapper:nth-child(40) {
  -webkit-animation: rotate 11539ms -20000ms linear infinite;
          animation: rotate 11539ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(40) .pool {
  top: calc(50% - 376px / 2);
  left: calc(50% - 376px / 2);
  width: 376px;
  height: 376px;
  border: 8px solid #64fc6e;
  border-radius: 81% 19% 22% 78% / 34% 57% 43% 66%;
}
.pool_wrapper:nth-child(41) {
  -webkit-animation: rotate 10477ms -20000ms linear infinite;
          animation: rotate 10477ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(41) .pool {
  top: calc(50% - 348px / 2);
  left: calc(50% - 348px / 2);
  width: 348px;
  height: 348px;
  border: 8px solid #646f99;
  border-radius: 83% 17% 71% 29% / 45% 74% 26% 55%;
}
.pool_wrapper:nth-child(42) {
  -webkit-animation: rotate 6403ms -20000ms linear infinite;
          animation: rotate 6403ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(42) .pool {
  top: calc(50% - 356px / 2);
  left: calc(50% - 356px / 2);
  width: 356px;
  height: 356px;
  border: 8px solid #64a3a0;
  border-radius: 58% 42% 30% 70% / 32% 48% 52% 68%;
}
.pool_wrapper:nth-child(43) {
  -webkit-animation: rotate 10616ms -20000ms linear infinite;
          animation: rotate 10616ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(43) .pool {
  top: calc(50% - 398px / 2);
  left: calc(50% - 398px / 2);
  width: 398px;
  height: 398px;
  border: 8px solid #64e38b;
  border-radius: 23% 77% 89% 11% / 28% 27% 73% 72%;
}
.pool_wrapper:nth-child(44) {
  -webkit-animation: rotate 10976ms -20000ms linear infinite;
          animation: rotate 10976ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(44) .pool {
  top: calc(50% - 537px / 2);
  left: calc(50% - 537px / 2);
  width: 537px;
  height: 537px;
  border: 8px solid #64fc6a;
  border-radius: 94% 6% 69% 31% / 80% 51% 49% 20%;
}
.pool_wrapper:nth-child(45) {
  -webkit-animation: rotate 11297ms -20000ms linear infinite;
          animation: rotate 11297ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(45) .pool {
  top: calc(50% - 459px / 2);
  left: calc(50% - 459px / 2);
  width: 459px;
  height: 459px;
  border: 8px solid #64bb5e;
  border-radius: 79% 21% 60% 40% / 38% 73% 27% 62%;
}
.pool_wrapper:nth-child(46) {
  -webkit-animation: rotate 8269ms -20000ms linear infinite;
          animation: rotate 8269ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(46) .pool {
  top: calc(50% - 474px / 2);
  left: calc(50% - 474px / 2);
  width: 474px;
  height: 474px;
  border: 8px solid #64d7a3;
  border-radius: 89% 11% 75% 25% / 31% 73% 27% 69%;
}
.pool_wrapper:nth-child(47) {
  -webkit-animation: rotate 14215ms -20000ms linear infinite;
          animation: rotate 14215ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(47) .pool {
  top: calc(50% - 354px / 2);
  left: calc(50% - 354px / 2);
  width: 354px;
  height: 354px;
  border: 8px solid #64e541;
  border-radius: 61% 39% 74% 26% / 82% 68% 32% 18%;
}
.pool_wrapper:nth-child(48) {
  -webkit-animation: rotate 14782ms -20000ms linear infinite;
          animation: rotate 14782ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(48) .pool {
  top: calc(50% - 318px / 2);
  left: calc(50% - 318px / 2);
  width: 318px;
  height: 318px;
  border: 8px solid #64cab8;
  border-radius: 98% 2% 83% 17% / 95% 79% 21% 5%;
}
.pool_wrapper:nth-child(49) {
  -webkit-animation: rotate 12039ms -20000ms linear infinite;
          animation: rotate 12039ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(49) .pool {
  top: calc(50% - 454px / 2);
  left: calc(50% - 454px / 2);
  width: 454px;
  height: 454px;
  border: 8px solid #64f09a;
  border-radius: 40% 60% 54% 46% / 43% 94% 6% 57%;
}
.pool_wrapper:nth-child(50) {
  -webkit-animation: rotate 12913ms -20000ms linear infinite;
          animation: rotate 12913ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(50) .pool {
  top: calc(50% - 387px / 2);
  left: calc(50% - 387px / 2);
  width: 387px;
  height: 387px;
  border: 8px solid #64d7c8;
  border-radius: 31% 69% 74% 26% / 30% 34% 66% 70%;
}
.pool_wrapper:nth-child(51) {
  -webkit-animation: rotate 8575ms -20000ms linear infinite;
          animation: rotate 8575ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(51) .pool {
  top: calc(50% - 416px / 2);
  left: calc(50% - 416px / 2);
  width: 416px;
  height: 416px;
  border: 8px solid #64f540;
  border-radius: 45% 55% 74% 26% / 33% 35% 65% 67%;
}
.pool_wrapper:nth-child(52) {
  -webkit-animation: rotate 10382ms -20000ms linear infinite;
          animation: rotate 10382ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(52) .pool {
  top: calc(50% - 314px / 2);
  left: calc(50% - 314px / 2);
  width: 314px;
  height: 314px;
  border: 8px solid #64bdc2;
  border-radius: 33% 67% 99% 1% / 67% 82% 18% 33%;
}
.pool_wrapper:nth-child(53) {
  -webkit-animation: rotate 6050ms -20000ms linear infinite;
          animation: rotate 6050ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(53) .pool {
  top: calc(50% - 302px / 2);
  left: calc(50% - 302px / 2);
  width: 302px;
  height: 302px;
  border: 8px solid #648abd;
  border-radius: 91% 9% 37% 63% / 100% 39% 61% 0%;
}
.pool_wrapper:nth-child(54) {
  -webkit-animation: rotate 13570ms -20000ms linear infinite;
          animation: rotate 13570ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(54) .pool {
  top: calc(50% - 385px / 2);
  left: calc(50% - 385px / 2);
  width: 385px;
  height: 385px;
  border: 8px solid #649f39;
  border-radius: 72% 28% 33% 67% / 41% 57% 43% 59%;
}
.pool_wrapper:nth-child(55) {
  -webkit-animation: rotate 8118ms -20000ms linear infinite;
          animation: rotate 8118ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(55) .pool {
  top: calc(50% - 404px / 2);
  left: calc(50% - 404px / 2);
  width: 404px;
  height: 404px;
  border: 8px solid #64a164;
  border-radius: 33% 67% 38% 62% / 37% 77% 23% 63%;
}
.pool_wrapper:nth-child(56) {
  -webkit-animation: rotate 7508ms -20000ms linear infinite;
          animation: rotate 7508ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(56) .pool {
  top: calc(50% - 514px / 2);
  left: calc(50% - 514px / 2);
  width: 514px;
  height: 514px;
  border: 8px solid #64d4ab;
  border-radius: 86% 14% 24% 76% / 66% 95% 5% 34%;
}
.pool_wrapper:nth-child(57) {
  -webkit-animation: rotate 7884ms -20000ms linear infinite;
          animation: rotate 7884ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(57) .pool {
  top: calc(50% - 344px / 2);
  left: calc(50% - 344px / 2);
  width: 344px;
  height: 344px;
  border: 8px solid #648caa;
  border-radius: 36% 64% 55% 45% / 90% 29% 71% 10%;
}
.pool_wrapper:nth-child(58) {
  -webkit-animation: rotate 10420ms -20000ms linear infinite;
          animation: rotate 10420ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-child(58) .pool {
  top: calc(50% - 363px / 2);
  left: calc(50% - 363px / 2);
  width: 363px;
  height: 363px;
  border: 8px solid #64a3a6;
  border-radius: 80% 20% 89% 11% / 46% 60% 40% 54%;
}
.pool_wrapper:nth-child(59) {
  -webkit-animation: rotate 7850ms -20000ms linear infinite;
          animation: rotate 7850ms -20000ms linear infinite;
  mix-blend-mode: screen;
}
.pool_wrapper:nth-.........完整代码请登录后点击上方下载按钮下载查看