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

网友评论0