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;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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