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) {
-webkit-animation: rotate 1725ms -20000ms infinite alternate;
animation: rotate 1725ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(19) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 57px;
height: 57px;
background: #bdca83;
border-radius: 78% 22% 54% 46% / 75% 52% 48% 25%;
-webkit-transform: translateY(243px);
transform: translateY(243px);
-webkit-animation: slide 1886ms -20000ms infinite alternate;
animation: slide 1886ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(20) {
-webkit-animation: rotate 1841ms -20000ms infinite alternate;
animation: rotate 1841ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(20) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 75px;
height: 75px;
background: #e76374;
border-radius: 85% 15% 61% 39% / 75% 49% 51% 25%;
-webkit-transform: translateY(162px);
transform: translateY(162px);
-webkit-animation: slide 1071ms -20000ms infinite alternate;
animation: slide 1071ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(21) {
-webkit-animation: rotate 1897ms -20000ms infinite alternate;
animation: rotate 1897ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(21) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 53px;
height: 53px;
background: #702dea;
border-radius: 67% 33% 87% 13% / 72% 40% 60% 28%;
-webkit-transform: translateY(271px);
transform: translateY(271px);
-webkit-animation: slide 1707ms -20000ms infinite alternate;
animation: slide 1707ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(22) {
-webkit-animation: rotate 1072ms -20000ms infinite alternate;
animation: rotate 1072ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(22) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 38px;
height: 38px;
background: #f83ba4;
border-radius: 37% 63% 94% 6% / 72% 75% 25% 28%;
-webkit-transform: translateY(199px);
transform: translateY(199px);
-webkit-animation: slide 1116ms -20000ms infinite alternate;
animation: slide 1116ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(23) {
-webkit-animation: rotate 1948ms -20000ms infinite alternate;
animation: rotate 1948ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(23) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 66px;
height: 66px;
background: #59a37c;
border-radius: 70% 30% 21% 79% / 76% 39% 61% 24%;
-webkit-transform: translateY(238px);
transform: translateY(238px);
-webkit-animation: slide 1389ms -20000ms infinite alternate;
animation: slide 1389ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(24) {
-webkit-animation: rotate 1336ms -20000ms infinite alternate;
animation: rotate 1336ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(24) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 45px;
height: 45px;
background: #a2a740;
border-radius: 76% 24% 44% 56% / 48% 66% 34% 52%;
-webkit-transform: translateY(208px);
transform: translateY(208px);
-webkit-animation: slide 1645ms -20000ms infinite alternate;
animation: slide 1645ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(25) {
-webkit-animation: rotate 1038ms -20000ms infinite alternate;
animation: rotate 1038ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(25) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 61px;
height: 61px;
background: #3f78cf;
border-radius: 26% 74% 87% 13% / 58% 21% 79% 42%;
-webkit-transform: translateY(113px);
transform: translateY(113px);
-webkit-animation: slide 1342ms -20000ms infinite alternate;
animation: slide 1342ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(26) {
-webkit-animation: rotate 1579ms -20000ms infinite alternate;
animation: rotate 1579ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(26) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 73px;
height: 73px;
background: #c68e77;
border-radius: 90% 10% 53% 47% / 78% 32% 68% 22%;
-webkit-transform: translateY(267px);
transform: translateY(267px);
-webkit-animation: slide 1985ms -20000ms infinite alternate;
animation: slide 1985ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(27) {
-webkit-animation: rotate 1075ms -20000ms infinite alternate;
animation: rotate 1075ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(27) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 68px;
height: 68px;
background: #44ced9;
border-radius: 66% 34% 26% 74% / 44% 31% 69% 56%;
-webkit-transform: translateY(187px);
transform: translateY(187px);
-webkit-animation: slide 1976ms -20000ms infinite alternate;
animation: slide 1976ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(28) {
-webkit-animation: rotate 1990ms -20000ms infinite alternate;
animation: rotate 1990ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(28) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 38px;
height: 38px;
background: #55169e;
border-radius: 86% 14% 93% 7% / 24% 40% 60% 76%;
-webkit-transform: translateY(267px);
transform: translateY(267px);
-webkit-animation: slide 1226ms -20000ms infinite alternate;
animation: slide 1226ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(29) {
-webkit-animation: rotate 1402ms -20000ms infinite alternate;
animation: rotate 1402ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(29) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 38px;
height: 38px;
background: #de5f22;
border-radius: 54% 46% 79% 21% / 62% 50% 50% 38%;
-webkit-transform: translateY(111px);
transform: translateY(111px);
-webkit-animation: slide 1937ms -20000ms infinite alternate;
animation: slide 1937ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(30) {
-webkit-animation: rotate 1749ms -20000ms infinite alternate;
animation: rotate 1749ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(30) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 24px;
height: 24px;
background: #6a3b37;
border-radius: 65% 35% 77% 23% / 100% 70% 30% 0%;
-webkit-transform: translateY(126px);
transform: translateY(126px);
-webkit-animation: slide 1124ms -20000ms infinite alternate;
animation: slide 1124ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(31) {
-webkit-animation: rotate 1485ms -20000ms infinite alternate;
animation: rotate 1485ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(31) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 59px;
height: 59px;
background: #c9ece6;
border-radius: 41% 59% 25% 75% / 37% 94% 6% 63%;
-webkit-transform: translateY(251px);
transform: translateY(251px);
-webkit-animation: slide 1414ms -20000ms infinite alternate;
animation: slide 1414ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(32) {
-webkit-animation: rotate 1304ms -20000ms infinite alternate;
animation: rotate 1304ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(32) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 45px;
height: 45px;
background: #dc7bdb;
border-radius: 44% 56% 62% 38% / 73% 79% 21% 27%;
-webkit-transform: translateY(204px);
transform: translateY(204px);
-webkit-animation: slide 1907ms -20000ms infinite alternate;
animation: slide 1907ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(33) {
-webkit-animation: rotate 1630ms -20000ms infinite alternate;
animation: rotate 1630ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(33) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 77px;
height: 77px;
background: #af367c;
border-radius: 65% 35% 46% 54% / 76% 24% 76% 24%;
-webkit-transform: translateY(236px);
transform: translateY(236px);
-webkit-animation: slide 1027ms -20000ms infinite alternate;
animation: slide 1027ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(34) {
-webkit-animation: rotate 1403ms -20000ms infinite alternate;
animation: rotate 1403ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(34) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 30px;
height: 30px;
background: #a3995f;
border-radius: 93% 7% 39% 61% / 72% 28% 72% 28%;
-webkit-transform: translateY(128px);
transform: translateY(128px);
-webkit-animation: slide 1714ms -20000ms infinite alternate;
animation: slide 1714ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(35) {
-webkit-animation: rotate 1825ms -20000ms infinite alternate;
animation: rotate 1825ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(35) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 54px;
height: 54px;
background: #15f809;
border-radius: 50% 50% 23% 77% / 99% 37% 63% 1%;
-webkit-transform: translateY(243px);
transform: translateY(243px);
-webkit-animation: slide 1819ms -20000ms infinite alternate;
animation: slide 1819ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(36) {
-webkit-animation: rotate 1173ms -20000ms infinite alternate;
animation: rotate 1173ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(36) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 46px;
height: 46px;
background: #c82212;
border-radius: 33% 67% 91% 9% / 44% 61% 39% 56%;
-webkit-transform: translateY(241px);
transform: translateY(241px);
-webkit-animation: slide 1792ms -20000ms infinite alternate;
animation: slide 1792ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(37) {
-webkit-animation: rotate 1949ms -20000ms infinite alternate;
animation: rotate 1949ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(37) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 40px;
height: 40px;
background: #852160;
border-radius: 39% 61% 81% 19% / 51% 61% 39% 49%;
-webkit-transform: translateY(189px);
transform: translateY(189px);
-webkit-animation: slide 1306ms -20000ms infinite alternate;
animation: slide 1306ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(38) {
-webkit-animation: rotate 1650ms -20000ms infinite alternate;
animation: rotate 1650ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(38) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 50px;
height: 50px;
background: #a3a701;
border-radius: 86% 14% 38% 62% / 82% 74% 26% 18%;
-webkit-transform: translateY(266px);
transform: translateY(266px);
-webkit-animation: slide 1983ms -20000ms infinite alternate;
animation: slide 1983ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(39) {
-webkit-animation: rotate 1840ms -20000ms infinite alternate;
animation: rotate 1840ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(39) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 60px;
height: 60px;
background: #4508e0;
border-radius: 93% 7% 43% 57% / 33% 85% 15% 67%;
-webkit-transform: translateY(104px);
transform: translateY(104px);
-webkit-animation: slide 1047ms -20000ms infinite alternate;
animation: slide 1047ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(40) {
-webkit-animation: rotate 1145ms -20000ms infinite alternate;
animation: rotate 1145ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(40) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 64px;
height: 64px;
background: #93455f;
border-radius: 51% 49% 52% 48% / 36% 59% 41% 64%;
-webkit-transform: translateY(269px);
transform: translateY(269px);
-webkit-animation: slide 1413ms -20000ms infinite alternate;
animation: slide 1413ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(41) {
-webkit-animation: rotate 1530ms -20000ms infinite alternate;
animation: rotate 1530ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(41) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 76px;
height: 76px;
background: #07b7d1;
border-radius: 67% 33% 66% 34% / 67% 38% 62% 33%;
-webkit-transform: translateY(278px);
transform: translateY(278px);
-webkit-animation: slide 1143ms -20000ms infinite alternate;
animation: slide 1143ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(42) {
-webkit-animation: rotate 1432ms -20000ms infinite alternate;
animation: rotate 1432ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(42) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 40px;
height: 40px;
background: #520660;
border-radius: 37% 63% 96% 4% / 98% 26% 74% 2%;
-webkit-transform: translateY(272px);
transform: translateY(272px);
-webkit-animation: slide 1935ms -20000ms infinite alternate;
animation: slide 1935ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(43) {
-webkit-animation: rotate 1108ms -20000ms infinite alternate;
animation: rotate 1108ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(43) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 51px;
height: 51px;
background: #470f30;
border-radius: 59% 41% 63% 37% / 44% 77% 23% 56%;
-webkit-transform: translateY(212px);
transform: translateY(212px);
-webkit-animation: slide 1042ms -20000ms infinite alternate;
animation: slide 1042ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(44) {
-webkit-animation: rotate 1509ms -20000ms infinite alternate;
animation: rotate 1509ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(44) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 70px;
height: 70px;
background: #a9d020;
border-radius: 27% 73% 94% 6% / 56% 31% 69% 44%;
-webkit-transform: translateY(216px);
transform: translateY(216px);
-webkit-animation: slide 1357ms -20000ms infinite alternate;
animation: slide 1357ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(45) {
-webkit-animation: rotate 1361ms -20000ms infinite alternate;
animation: rotate 1361ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(45) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 60px;
height: 60px;
background: #6e84b9;
border-radius: 58% 42% 99% 1% / 45% 71% 29% 55%;
-webkit-transform: translateY(228px);
transform: translateY(228px);
-webkit-animation: slide 1623ms -20000ms infinite alternate;
animation: slide 1623ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(46) {
-webkit-animation: rotate 1453ms -20000ms infinite alternate;
animation: rotate 1453ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(46) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 70px;
height: 70px;
background: #49baf0;
border-radius: 97% 3% 39% 61% / 78% 100% 0% 22%;
-webkit-transform: translateY(195px);
transform: translateY(195px);
-webkit-animation: slide 1025ms -20000ms infinite alternate;
animation: slide 1025ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(47) {
-webkit-animation: rotate 1753ms -20000ms infinite alternate;
animation: rotate 1753ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(47) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 22px;
height: 22px;
background: #3c2904;
border-radius: 78% 22% 40% 60% / 74% 84% 16% 26%;
-webkit-transform: translateY(197px);
transform: translateY(197px);
-webkit-animation: slide 1254ms -20000ms infinite alternate;
animation: slide 1254ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(48) {
-webkit-animation: rotate 1844ms -20000ms infinite alternate;
animation: rotate 1844ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(48) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 32px;
height: 32px;
background: #b974ba;
border-radius: 72% 28% 67% 33% / 69% 91% 9% 31%;
-webkit-transform: translateY(194px);
transform: translateY(194px);
-webkit-animation: slide 1476ms -20000ms infinite alternate;
animation: slide 1476ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(49) {
-webkit-animation: rotate 1261ms -20000ms infinite alternate;
animation: rotate 1261ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(49) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 46px;
height: 46px;
background: #891e18;
border-radius: 25% 75% 69% 31% / 81% 96% 4% 19%;
-webkit-transform: translateY(214px);
transform: translateY(214px);
-webkit-animation: slide 1904ms -20000ms infinite alternate;
animation: slide 1904ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(50) {
-webkit-animation: rotate 1345ms -20000ms infinite alternate;
animation: rotate 1345ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(50) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 53px;
height: 53px;
background: #e084b5;
border-radius: 35% 65% 54% 46% / 27% 61% 39% 73%;
-webkit-transform: translateY(253px);
transform: translateY(253px);
-webkit-animation: slide 1171ms -20000ms infinite alternate;
animation: slide 1171ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(51) {
-webkit-animation: rotate 1672ms -20000ms infinite alternate;
animation: rotate 1672ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(51) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 45px;
height: 45px;
background: #b357ea;
border-radius: 40% 60% 93% 7% / 64% 38% 62% 36%;
-webkit-transform: translateY(225px);
transform: translateY(225px);
-webkit-animation: slide 1493ms -20000ms infinite alternate;
animation: slide 1493ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(52) {
-webkit-animation: rotate 1764ms -20000ms infinite alternate;
animation: rotate 1764ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(52) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 34px;
height: 34px;
background: #3bacb9;
border-radius: 57% 43% 71% 29% / 41% 98% 2% 59%;
-webkit-transform: translateY(160px);
transform: translateY(160px);
-webkit-animation: slide 1185ms -20000ms infinite alternate;
animation: slide 1185ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(53) {
-webkit-animation: rotate 1245ms -20000ms infinite alternate;
animation: rotate 1245ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(53) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 45px;
height: 45px;
background: #8aca59;
border-radius: 30% 70% 54% 46% / 85% 35% 65% 15%;
-webkit-transform: translateY(186px);
transform: translateY(186px);
-webkit-animation: slide 1349ms -20000ms infinite alternate;
animation: slide 1349ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(54) {
-webkit-animation: rotate 1427ms -20000ms infinite alternate;
animation: rotate 1427ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(54) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 26px;
height: 26px;
background: #91c784;
border-radius: 35% 65% 40% 60% / 46% 54% 46% 54%;
-webkit-transform: translateY(225px);
transform: translateY(225px);
-webkit-animation: slide 1388ms -20000ms infinite alternate;
animation: slide 1388ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(55) {
-webkit-animation: rotate 1994ms -20000ms infinite alternate;
animation: rotate 1994ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(55) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 51px;
height: 51px;
background: #42e47f;
border-radius: 96% 4% 25% 75% / 81% 29% 71% 19%;
-webkit-transform: translateY(197px);
transform: translateY(197px);
-webkit-animation: slide 1526ms -20000ms infinite alternate;
animation: slide 1526ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(56) {
-webkit-animation: rotate 1562ms -20000ms infinite alternate;
animation: rotate 1562ms -20000ms infinite alternate;
mix-blend-mode: screen;
}
.ball_wrapper:nth-child(56) .ball {
top: calc(50% - $size / 2);
left: calc(50% - $size / 2);
width: 80px;
height: 80px;
background: #a05672;
border-radius: 43% 57% 52% 48% / 73% 73% 27% 27%;
-webkit-transform: translateY(145px);
transform: translateY(145px);
-webkit-animation: slide 1147ms -20000ms infinite alternate;
animation: slide 1147ms -20000ms infinite alternate;
}
.ball_wrapper:nth-child(57) {
-webkit-animation: rotate 1255ms -20000ms infinite alternate;
animation: rotate 1255ms -20000ms infinite alternate;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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