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