纯css实现水波旋转效果
代码语言: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);.........完整代码请登录后点击上方下载按钮下载查看
网友评论0