css实现彩色液体融合动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现彩色液体融合动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background: #000;
height: 100vh;
overflow: hidden;
}
.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);
}
.ball {
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 30px);
width: 60px;
height: 60px;
background: #fff;
}
.ball_wrapper:nth-child(1) {
-webkit-animation: rotate 1827ms -20000ms infinite alternate;
animation: rotate 1827ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(1) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 63px;
height: 63px;
background: #69beeb;
border-radius: 73% 27% 31% 69% / 59% 80% 20% 41%;
-webkit-transform: translateY(116px);
transform: translateY(116px);
-webkit-animation: slide 1714ms -20000ms infinite alternate;
animation: slide 1714ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(2) {
-webkit-animation: rotate 1718ms -20000ms infinite alternate;
animation: rotate 1718ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(2) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 80px;
height: 80px;
background: #af8702;
border-radius: 25% 75% 71% 29% / 37% 93% 7% 63%;
-webkit-transform: translateY(161px);
transform: translateY(161px);
-webkit-animation: slide 1731ms -20000ms infinite alternate;
animation: slide 1731ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(3) {
-webkit-animation: rotate 1340ms -20000ms infinite alternate;
animation: rotate 1340ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(3) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 48px;
height: 48px;
background: #2aa027;
border-radius: 24% 76% 68% 32% / 70% 84% 16% 30%;
-webkit-transform: translateY(263px);
transform: translateY(263px);
-webkit-animation: slide 1284ms -20000ms infinite alternate;
animation: slide 1284ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(4) {
-webkit-animation: rotate 1730ms -20000ms infinite alternate;
animation: rotate 1730ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(4) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 40px;
height: 40px;
background: #9a037c;
border-radius: 22% 78% 25% 75% / 41% 66% 34% 59%;
-webkit-transform: translateY(264px);
transform: translateY(264px);
-webkit-animation: slide 1666ms -20000ms infinite alternate;
animation: slide 1666ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(5) {
-webkit-animation: rotate 1930ms -20000ms infinite alternate;
animation: rotate 1930ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(5) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 22px;
height: 22px;
background: #f1778c;
border-radius: 73% 27% 39% 61% / 95% 73% 27% 5%;
-webkit-transform: translateY(222px);
transform: translateY(222px);
-webkit-animation: slide 1995ms -20000ms infinite alternate;
animation: slide 1995ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(6) {
-webkit-animation: rotate 1652ms -20000ms infinite alternate;
animation: rotate 1652ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(6) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 48px;
height: 48px;
background: #b14125;
border-radius: 56% 44% 45% 55% / 96% 49% 51% 4%;
-webkit-transform: translateY(253px);
transform: translateY(253px);
-webkit-animation: slide 1287ms -20000ms infinite alternate;
animation: slide 1287ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(7) {
-webkit-animation: rotate 1127ms -20000ms infinite alternate;
animation: rotate 1127ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(7) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 54px;
height: 54px;
background: #3fb6a3;
border-radius: 82% 18% 96% 4% / 61% 87% 13% 39%;
-webkit-transform: translateY(217px);
transform: translateY(217px);
-webkit-animation: slide 1796ms -20000ms infinite alternate;
animation: slide 1796ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(8) {
-webkit-animation: rotate 1895ms -20000ms infinite alternate;
animation: rotate 1895ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(8) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 65px;
height: 65px;
background: #c58ec6;
border-radius: 45% 55% 74% 26% / 83% 51% 49% 17%;
-webkit-transform: translateY(221px);
transform: translateY(221px);
-webkit-animation: slide 1254ms -20000ms infinite alternate;
animation: slide 1254ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(9) {
-webkit-animation: rotate 1856ms -20000ms infinite alternate;
animation: rotate 1856ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(9) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 47px;
height: 47px;
background: #ea6d61;
border-radius: 62% 38% 40% 60% / 51% 60% 40% 49%;
-webkit-transform: translateY(247px);
transform: translateY(247px);
-webkit-animation: slide 1188ms -20000ms infinite alternate;
animation: slide 1188ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(10) {
-webkit-animation: rotate 1825ms -20000ms infinite alternate;
animation: rotate 1825ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(10) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 46px;
height: 46px;
background: #6db4ee;
border-radius: 29% 71% 23% 77% / 51% 39% 61% 49%;
-webkit-transform: translateY(216px);
transform: translateY(216px);
-webkit-animation: slide 1404ms -20000ms infinite alternate;
animation: slide 1404ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(11) {
-webkit-animation: rotate 1490ms -20000ms infinite alternate;
animation: rotate 1490ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(11) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 37px;
height: 37px;
background: #d47637;
border-radius: 33% 67% 81% 19% / 91% 37% 63% 9%;
-webkit-transform: translateY(130px);
transform: translateY(130px);
-webkit-animation: slide 1239ms -20000ms infinite alternate;
animation: slide 1239ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(12) {
-webkit-animation: rotate 1278ms -20000ms infinite alternate;
animation: rotate 1278ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(12) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 49px;
height: 49px;
background: #5a6e8c;
border-radius: 51% 49% 65% 35% / 43% 93% 7% 57%;
-webkit-transform: translateY(117px);
transform: translateY(117px);
-webkit-animation: slide 1111ms -20000ms infinite alternate;
animation: slide 1111ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(13) {
-webkit-animation: rotate 1879ms -20000ms infinite alternate;
animation: rotate 1879ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(13) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 68px;
height: 68px;
background: #aebe3f;
border-radius: 62% 38% 98% 2% / 36% 57% 43% 64%;
-webkit-transform: translateY(197px);
transform: translateY(197px);
-webkit-animation: slide 1545ms -20000ms infinite alternate;
animation: slide 1545ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(14) {
-webkit-animation: rotate 1455ms -20000ms infinite alternate;
animation: rotate 1455ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(14) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 63px;
height: 63px;
background: #e26646;
border-radius: 60% 40% 73% 27% / 59% 21% 79% 41%;
-webkit-transform: translateY(244px);
transform: translateY(244px);
-webkit-animation: slide 1570ms -20000ms infinite alternate;
animation: slide 1570ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(15) {
-webkit-animation: rotate 1955ms -20000ms infinite alternate;
animation: rotate 1955ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(15) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 41px;
height: 41px;
background: #9e21b4;
border-radius: 72% 28% 57% 43% / 56% 75% 25% 44%;
-webkit-transform: translateY(165px);
transform: translateY(165px);
-webkit-animation: slide 1063ms -20000ms infinite alternate;
animation: slide 1063ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(16) {
-webkit-animation: rotate 1497ms -20000ms infinite alternate;
animation: rotate 1497ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(16) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 54px;
height: 54px;
background: #9c9660;
border-radius: 68% 32% 23% 77% / 76% 73% 27% 24%;
-webkit-transform: translateY(192px);
transform: translateY(192px);
-webkit-animation: slide 1829ms -20000ms infinite alternate;
animation: slide 1829ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(17) {
-webkit-animation: rotate 1800ms -20000ms infinite alternate;
animation: rotate 1800ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(17) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 33px;
height: 33px;
background: #cfc56d;
border-radius: 85% 15% 29% 71% / 49% 90% 10% 51%;
-webkit-transform: translateY(179px);
transform: translateY(179px);
-webkit-animation: slide 1231ms -20000ms infinite alternate;
animation: slide 1231ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(18) {
-webkit-animation: rotate 1582ms -20000ms infinite alternate;
animation: rotate 1582ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(18) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 64px;
height: 64px;
background: #af4431;
border-radius: 81% 19% 29% 71% / 50% 38% 62% 50%;
-webkit-transform: translateY(233px);
transform: translateY(233px);
-webkit-animation: slide 1565ms -20000ms infinite alternate;
animation: slide 1565ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(19) {
-web.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0