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