css实现文字聚光灯式圣诞节快乐动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现文字聚光灯式圣诞节快乐动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
    <style>
        body {
  background: #050a19;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

#ui .text {
  position: absolute;
  font-size: 10rem;
  color: #fff;
  line-height: 10rem;
  font-family: "Anton", sans-serif;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  letter-spacing: 1rem;
}
#ui .text:nth-child(1) {
  color: #0455cc;
  -webkit-animation: clip0 17816ms ease-in-out infinite alternate;
          animation: clip0 17816ms ease-in-out infinite alternate;
  filter: blur(11px);
}
@-webkit-keyframes clip0 {
  0% {
    -webkit-clip-path: circle(140px at 3% 105%);
            clip-path: circle(140px at 3% 105%);
  }
  25% {
    -webkit-clip-path: circle(137px at 95% 105%);
            clip-path: circle(137px at 95% 105%);
  }
  50% {
    -webkit-clip-path: circle(94px at 49% -5%);
            clip-path: circle(94px at 49% -5%);
  }
  75% {
    -webkit-clip-path: circle(59px at -24% -13%);
            clip-path: circle(59px at -24% -13%);
  }
  100% {
    -webkit-clip-path: circle(74px at 6% -12%);
            clip-path: circle(74px at 6% -12%);
  }
}
@keyframes clip0 {
  0% {
    -webkit-clip-path: circle(140px at 3% 105%);
            clip-path: circle(140px at 3% 105%);
  }
  25% {
    -webkit-clip-path: circle(137px at 95% 105%);
            clip-path: circle(137px at 95% 105%);
  }
  50% {
    -webkit-clip-path: circle(94px at 49% -5%);
            clip-path: circle(94px at 49% -5%);
  }
  75% {
    -webkit-clip-path: circle(59px at -24% -13%);
            clip-path: circle(59px at -24% -13%);
  }
  100% {
    -webkit-clip-path: circle(74px at 6% -12%);
            clip-path: circle(74px at 6% -12%);
  }
}
#ui .text:nth-child(2) {
  color: #0e22c6;
  -webkit-animation: clip1 19983ms ease-in-out infinite alternate;
          animation: clip1 19983ms ease-in-out infinite alternate;
  filter: blur(6px);
}
@-webkit-keyframes clip1 {
  0% {
    -webkit-clip-path: circle(111px at 0% 92%);
            clip-path: circle(111px at 0% 92%);
  }
  25% {
    -webkit-clip-path: circle(180px at 42% 3%);
            clip-path: circle(180px at 42% 3%);
  }
  50% {
    -webkit-clip-path: circle(130px at 78% 124%);
            clip-path: circle(130px at 78% 124%);
  }
  75% {
    -webkit-clip-path: circle(161px at 22% 34%);
            clip-path: circle(161px at 22% 34%);
  }
  100% {
    -webkit-clip-path: circle(96px at -24% 66%);
            clip-path: circle(96px at -24% 66%);
  }
}
@keyframes clip1 {
  0% {
    -webkit-clip-path: circle(111px at 0% 92%);
            clip-path: circle(111px at 0% 92%);
  }
  25% {
    -webkit-clip-path: circle(180px at 42% 3%);
            clip-path: circle(180px at 42% 3%);
  }
  50% {
    -webkit-clip-path: circle(130px at 78% 124%);
            clip-path: circle(130px at 78% 124%);
  }
  75% {
    -webkit-clip-path: circle(161px at 22% 34%);
            clip-path: circle(161px at 22% 34%);
  }
  100% {
    -webkit-clip-path: circle(96px at -24% 66%);
            clip-path: circle(96px at -24% 66%);
  }
}
#ui .text:nth-child(3) {
  color: #1259d8;
  -webkit-animation: clip2 14819ms ease-in-out infinite alternate;
          animation: clip2 14819ms ease-in-out infinite alternate;
  filter: blur(1px);
}
@-webkit-keyframes clip2 {
  0% {
    -webkit-clip-path: circle(153px at 91% 2%);
            clip-path: circle(153px at 91% 2%);
  }
  25% {
    -webkit-clip-path: circle(86px at 12% 126%);
            clip-path: circle(86px at 12% 126%);
  }
  50% {
    -webkit-clip-path: circle(84px at -20% -29%);
            clip-path: circle(84px at -20% -29%);
  }
  75% {
    -webkit-clip-path: circle(63px at 117% 27%);
            clip-path: circle(63px at 117% 27%);
  }
  100% {
    -webkit-clip-path: circle(68px at 11% 84%);
            clip-path: circle(68px at 11% 84%);
  }
}
@keyframes clip2 {
  0% {
    -webkit-clip-path: circle(153px at 91% 2%);
            clip-path: circle(153px at 91% 2%);
  }
  25% {
    -webkit-clip-path: circle(86px at 12% 126%);
            clip-path: circle(86px at 12% 126%);
  }
  50% {
    -webkit-clip-path: circle(84px at -20% -29%);
            clip-path: circle(84px at -20% -29%);
  }
  75% {
    -webkit-clip-path: circle(63px at 117% 27%);
            clip-path: circle(63px at 117% 27%);
  }
  100% {
    -webkit-clip-path: circle(68px at 11% 84%);
            clip-path: circle(68px at 11% 84%);
  }
}
#ui .text:nth-child(4) {
  color: #0224c4;
  -webkit-animation: clip3 18247ms ease-in-out infinite alternate;
          animation: clip3 18247ms ease-in-out infinite alternate;
  filter: blur(11px);
}
@-webkit-keyframes clip3 {
  0% {
    -webkit-clip-path: circle(60px at 5% 112%);
            clip-path: circle(60px at 5% 112%);
  }
  25% {
    -webkit-clip-path: circle(97px at 113% 119%);
            clip-path: circle(97px at 113% 119%);
  }
  50% {
    -webkit-clip-path: circle(34px at -15% -20%);
            clip-path: circle(34px at -15% -20%);
  }
  75% {
    -webkit-clip-path: circle(45px at 23% 39%);
            clip-path: circle(45px at 23% 39%);
  }
  100% {
    -webkit-clip-path: circle(62px at 5% -1%);
            clip-path: circle(62px at 5% -1%);
  }
}
@keyframes clip3 {
  0% {
    -webkit-clip-path: circle(60px at 5% 112%);
            clip-path: circle(60px at 5% 112%);
  }
  25% {
    -webkit-clip-path: circle(97px at 113% 119%);
            clip-path: circle(97px at 113% 119%);
  }
  50% {
    -webkit-clip-path: circle(34px at -15% -20%);
            clip-path: circle(34px at -15% -20%);
  }
  75% {
    -webkit-clip-path: circle(45px at 23% 39%);
            clip-path: circle(45px at 23% 39%);
  }
  100% {
    -webkit-clip-path: circle(62px at 5% -1%);
            clip-path: circle(62px at 5% -1%);
  }
}
#ui .text:nth-child(5) {
  color: #1a319d;
  -webkit-animation: clip4 18243ms ease-in-out infinite alternate;
          animation: clip4 18243ms ease-in-out infinite alternate;
  filter: blur(11px);
}
@-webkit-keyframes clip4 {
  0% {
    -webkit-clip-path: circle(123px at 129% 44%);
            clip-path: circle(123px at 129% 44%);
  }
  25% {
    -webkit-clip-path: circle(76px at -9% 128%);
            clip-path: circle(76px at -9% 128%);
  }
  50% {
    -webkit-clip-path: circle(31px at 2% 32%);
            clip-path: circle(31px at 2% 32%);
  }
  75% {
    -webkit-clip-path: circle(166px at 64% 85%);
            clip-path: circle(166px at 64% 85%);
  }
  100% {
    -webkit-clip-path: circle(89px at 113% 25%);
            clip-path: circle(89px at 113% 25%);
  }
}
@keyframes clip4 {
  0% {
    -webkit-clip-path: circle(123px at 129% 44%);
            clip-path: circle(123px at 129% 44%);
  }
  25% {
    -webkit-clip-path: circle(76px at -9% 128%);
            clip-path: circle(76px at -9% 128%);
  }
  50% {
    -webkit-clip-path: circle(31px at 2% 32%);
            clip-path: circle(31px at 2% 32%);
  }
  75% {
    -webkit-clip-path: circle(166px at 64% 85%);
            clip-path: circle(166px at 64% 85%);
  }
  100% {
    -webkit-clip-path: circle(89px at 113% 25%);
            clip-path: circle(89px at 113% 25%);
  }
}
#ui .text:nth-child(6) {
  color: #083fa2;
  -webkit-animation: clip5 15824ms ease-in-out infinite alternate;
          animation: clip5 15824ms ease-in-out infinite alternate;
  filter: blur(-4px);
}
@-webkit-keyframes clip5 {
  0% {
    -webkit-clip-path: circle(61px at 81% 26%);
            clip-path: circle(61px at 81% 26%);
  }
  25% {
    -webkit-clip-path: circle(138px at 67% 27%);
            clip-path: circle(138px at 67% 27%);
  }
  50% {
    -webkit-clip-path: circle(93px at -13% 7%);
            clip-path: circle(93px at -13% 7%);
  }
  75% {
    -webkit-clip-path: circle(119px at 88% 82%);
            clip-path: circle(119px at 88% 82%);
  }
  100% {
    -webkit-clip-path: circle(40px at 126% 79%);
            clip-path: circle(40px at 126% 79%);
  }
}
@keyframes clip5 {
  0% {
    -webkit-clip-path: circle(61px at 81% 26%);
            clip-path: circle(61px at 81% 26%);
  }
  25% {
    -webkit-clip-path: circle(138px at 67% 27%);
            clip-path: circle(138px at 67% 27%);
  }
  50% {
    -webkit-clip-path: circle(93px at -13% 7%);
            clip-path: circle(93px at -13% 7%);
  }
  75% {
    -webkit-clip-path: circle(119px at 88% 82%);
            clip-path: circle(119px at 88% 82%);
  }
  100% {
    -webkit-clip-path: circle(40px at 126% 79%);
            clip-path: circle(40px at 126% 79%);
  }
}
#ui .text:nth-child(7) {
  color: #0318cc;
  -webkit-animation: clip6 16269ms ease-in-out infinite alternate;
          animation: clip6 16269ms ease-in-out infinite alternate;
  filter: blur(12px);
}
@-webkit-keyframes clip6 {
  0% {
    -webkit-clip-path: circle(118px at 114% 7%);
            clip-path: circle(118px at 114% 7%);
  }
  25% {
    -webkit-clip-path: circle(156px at 122% 23%);
            clip-path: circle(156px at 122% 23%);
  }
  50% {
    -webkit-clip-path: circle(169px at -29% 66%);
            clip-path: circle(169px at -29% 66%);
  }
  75% {
    -webkit-clip-path: circle(139px at 90% 48%);
            clip-path: circle(139px at 90% 48%);
  }
  100% {
    -webkit-clip-path: circle(90px at 26% 40%);
            clip-path: circle(90px at 26% 40%);
  }
}
@keyframes clip6 {
  0% {
    -webkit-clip-path: circle(118px at 114% 7%);
            clip-path: circle(118px at 114% 7%);
  }
  25% {
    -webkit-clip-path: circle(156px at 122% 23%);
            clip-path: circle(156px at 122% 23%);
  }
  50% {
    -webkit-clip-path: circle(169px at -29% 66%);
            clip-path: circle(169px at -29% 66%);
  }
  75% {
    -webkit-clip-path: circle(139px at 90% 48%);
            clip-path: circle(139px at 90% 48%);
  }
  100% {
    -webkit-clip-path: circle(90px at 26% 40%);
            clip-path: circle(90px at 26% 40%);
  }
}
#ui .text:nth-child(8) {
  color: #1448f2;
  -webkit-animation: clip7 13412ms ease-in-out infinite alternate;
          animation: clip7 13412ms ease-in-out infinite alternate;
  filter: blur(-2px);
}
@-webkit-keyframes clip7 {
  0% {
    -webkit-clip-path: circle(154px at -8% 54%);
            clip-path: circle(154px at -8% 54%);
  }
  25% {
    -webkit-clip-path: circle(73px at 119% -22%);
            clip-path: circle(73px at 119% -22%);
  }
  50% {
    -webkit-clip-path: circle(169px at 8% 37%);
            clip-path: circle(169px at 8% 37%);
  }
  75% {
    -webkit-clip-path: circle(82px at 32% 99%);
            clip-path: circle(82px at 32% 99%);
  }
  100% {
    -webkit-clip-path: circle(88px at 33% 63%);
            clip-path: circle(88px at 33% 63%);
  }
}
@keyframes clip7 {
  0% {
    -webkit-clip-path: circle(154px at -8% 54%);
            clip-path: circle(154px at -8% 54%);
  }
  25% {
    -webkit-clip-path: circle(73px at 119% -22%);
            clip-path: circle(73px at 119% -22%);
  }
  50% {
    -webkit-clip-path: circle(169px at 8% 37%);
            clip-path: circle(169px at 8% 37%);
  }
  75% {
    -webkit-clip-path: circle(82px at 32% 99%);
            clip-path: circle(82px at 32% 99%);
  }
  100% {
    -webkit-clip-path: circle(88px at 33% 63%);
            clip-path: circle(88px at 33% 63%);
  }
}
#ui .text:nth-child(9) {
  color: #104584;
  -webkit-animation: clip8 19862ms ease-in-out infinite alternate;
          animation: clip8 19862ms ease-in-out infinite alternate;
  filter: blur(-7px);
}
@-webkit-keyframes clip8 {
  0% {
    -webkit-clip-path: circle(116px at 78% 90%);
            clip-path: circle(116px at 78% 90%);
  }
  25% {
    -webkit-clip-path: circle(60px at 109% 7%);
            clip-path: circle(60px at 109% 7%);
  }
  50% {
    -webkit-clip-path: circle(124px at 90% 22%);
            clip-path: circle(124px at 90% 22%);
  }
  75% {
    -webkit-clip-path: circle(162px at 106% 101%);
            clip-path: circle(162px at 106% 101%);
  }
  100% {
    -webkit-clip-path: circle(144px at 71% -24%);
            clip-path: circle(144px at 71% -24%);
  }
}
@keyframes clip8 {
  0% {
    -webkit-clip-path: circle(116px at 78% 90%);
            clip-path: circle(116px at 78% 90%);
  }
  25% {
    -webkit-clip-path: circle(60px at 109% 7%);
            clip-path: circle(60px at 109% 7%);
  }
  50% {
    -webkit-clip-path: circle(124px at 90% 22%);
            clip-path: circle(124px at 90% 22%);
  }
  75% {
    -webkit-clip-path: circle(162px at 106% 101%);
            clip-path: circle(162px at 106% 101%);
  }
  100% {
    -webkit-clip-path: circle(144px at 71% -24%);
            clip-path: circle(144px at 71% -24%);
  }
}
#ui .text:nth-child(10) {
  color: #02336d;
  -webkit-animation: clip9 14338ms ease-in-out infinite alternate;
          animation: clip9 14338ms ease-in-out infinite alternate;
  filter: blur(6px);
}
@-webkit-keyframes clip9 {
  0% {
    -webkit-clip-path: circle(140px at 123% 91%);
            clip-path: circle(140px at 123% 91%);
  }
  25% {
    -webkit-clip-path: circle(96px at 49% -14%);
            clip-path: circle(96px at 49% -14%);
  }
  50% {
    -webkit-clip-path: circle(163px at -18% 115%);
            clip-path: circle(163px at -18% 115%);
  }
  75% {
    -webkit-clip-path: circle(111px at 42% 106%);
            clip-path: circle(111px at 42% 106%);
  }
  100% {
    -webkit-clip-path: circle(62px at 31% 0%);
            clip-path: circle(62px at 31% 0%);
  }
}
@keyframes clip9 {
  0% {
    -webkit-clip-path: circle(140px at 123% 91%);
            clip-path: circle(140px at 123% 91%);
  }
  25% {
    -webkit-clip-path: circle(96px at 49% -14%);
            clip-path: circle(96px at 49% -14%);
  }
  50% {
    -webkit-clip-path: circle(163px at -18% 115%);
            clip-path: circle(163px at -18% 115%);
  }
  75% {
    -webkit-clip-path: circle(111px at 42% 106%);
            clip-path: circle(111px at 42% 106%);
  }
  100% {
    -webkit-clip-path: circle(62px at 31% 0%);
            clip-path: circle(62px at 31% 0%);
  }
}
#ui .text:nth-child(11) {
  color: #1817f0;
  -webkit-animation: clip10 16821ms ease-in-out infinite alternate;
          animation: clip10 16821ms ease-in-out infinite alternate;
  filter: blur(1px);
}
@-webkit-keyframes clip10 {
  0% {
    -webkit-clip-path: circle(129px at -22% 80%);
            clip-path: circle(129px at -22% 80%);
  }
  25% {
    -webkit-clip-path: circle(174px at 30% 118%);
            clip-path: circle(174px at 30% 118%);
  }
  50% {
    -webkit-clip-path: circle(54px at 54% 39%);
            clip-path: circle(54px at 54% 39%);
  }
  75% {
    -webkit-clip-path: circle(53px at 96% -8%);
            clip-path: circle(53px at 96% -8%);
  }
  100% {
    -webkit-clip-path: circle(173px at -26% 62%);
            clip-path: circle(173px at -26% 62%);
  }
}
@keyframes clip10 {
  0% {
    -webkit-clip-path: circle(129px at -22% 80%);
            clip-path: circle(129px at -22% 80%);
  }
  25% {
    -webkit-clip-path: circle(174px at 30% 118%);
            clip-path: circle(174px at 30% 118%);
  }
  50% {
    -webkit-clip-path: circle(54px at 54% 39%);
            clip-path: circle(54px at 54% 39%);
  }
  75% {
    -webkit-clip-path: circle(53px at 96% -8%);
            clip-path: circle(53px at 96% -8%);
  }
  100% {
    -webkit-clip-path: circle(173px at -26% 62%);
            clip-path: circle(173px at -26% 62%);
  }
}
#ui .text:nth-child(12) {
  color: #0d12e9;
  -webkit-animation: clip11 12902ms ease-in-out infinite alternate;
          animation: clip11 12902ms ease-in-out infinite alternate;
  filter: blur(13px);
}
@-webkit-keyframes clip11 {
  0% {
    -webkit-clip-path: circle(122px at 93% 14%);
            clip-path: circle(122px at 93% 14%);
  }
  25% {
    -webkit-clip-path: circle(67px at 45% -18%);
            clip-path: circle(67px at 45% -18%);
  }
  50% {
    -webkit-clip-path: circle(109px at -8% 123%);
            clip-path: circle(109px at -8% 123%);
  }
  75% {
    -webkit-clip-path: circle(109px at 93% 92%);
            clip-path: circle(109px at 93% 92%);
  }
  100% {
    -webkit-clip-path: circle(120px at 114% 29%);
            clip-path: circle(120px at 114% 29%);
  }
}
@keyframes clip11 {
  0% {
    -webkit-clip-path: circle(122px at 93% 14%);
            clip-path: circle(122px at 93% 14%);
  }
  25% {
    -webkit-clip-path: circle(67px at 45% -18%);
            clip-path: circle(67px at 45% -18%);
  }
  50% {
    -webkit-clip-path: circle(109px at -8% 123%);
            clip-path: circle(109px at -8% 123%);
  }
  75% {
    -webkit-clip-path: circle(109px at 93% 92%);
            clip-path: circle(109px at 93% 92%);
  }
  100% {
    -webkit-clip-path: circle(120px at 114% 29%);
            clip-path: circle(120px at 114% 29%);
  }
}
#ui .text:nth-child(13) {
  color: #1e5b85;
  -webkit-animation: clip12 14797ms ease-in-out infinite alternate;
          animation: clip12 14797ms ease-in-out infinite alternate;
  filter: blur(6px);
}
@-webkit-keyframes clip12 {
  0% {
    -webkit-clip-path: circle(174px at -9% 40%);
            clip-path: circle(174px at -9% 40%);
  }
  25% {
    -webkit-clip-path: circle(31px at 31% 21%);
            clip-path: circle(31px at 31% 21%);
  }
  50% {
    -webkit-clip-path: circle(61px at 66% 121%);
            clip-path: circle(61px at 66% 121%);
  }
  75% {
    -webkit-clip-path: circle(37px at 13% 47%);
            clip-path: circle(37px at 13% 47%);
  }
  100% {
    -webkit-clip-path: circle(73px at 127% 88%);
            clip-path: circle(73px at 127% 88%);
  }
}
@keyframes clip12 {
  0% {
    -webkit-clip-path: circle(174px at -9% 40%);
            clip-path: circle(174px at -9% 40%);
  }
  25% {
    -webkit-clip-path: circle(31px at 31% 21%);
            clip-path: circle(31px at 31% 21%);
  }
  50% {
    -webkit-clip-path: circle(61px at 66% 121%);
            clip-path: circle(61px at 66% 121%);
  }
  75% {
    -webkit-clip-path: circle(37px at 13% 47%);
            clip-path: circle(37px at 13% 47%);
  }
  100% {
    -webkit-clip-path: circle(73px at 127% 88%);
            clip-path: circle(73px at 127% 88%);
  }
}
#ui .text:nth-child(14) {
  color: #1b187c;
  -webkit-animation: clip13 14929ms ease-in-out infinite alternate;
          animation: clip13 14929ms ease-in-out infinite alternate;
  filter: blur(7px);
}
@-webkit-keyframes clip13 {
  0% {
    -webkit-clip-path: circle(107px at 86% -9%);
            clip-path: circle(107px at 86% -9%);
  }
  25% {
    -webkit-clip-path: circle(156px at 89% 55%);
            clip-path: circle(156px at 89% 55%);
  }
  50% {
    -webkit-clip-path: circle(49px at 6% 36%);
            clip-path: circle(49px at 6% 36%);
  }
  75% {
    -webkit-clip-path: circle(51px at 124% 42%);
            clip-path: circle(51px at 124% 42%);
  }
  100% {
    -webkit-clip-path: circle(75px at 84% 44%);
            clip-path: circle(75px at 84% 44%);
  }
}
@keyframes clip13 {
  0% {
    -webkit-clip-path: circle(107px at 86% -9%);
            clip-path: circle(107px at 86% -9%);
  }
  25% {
    -webkit-clip-path: circle(156px at 89% 55%);
            clip-path: circle(156px at 89% 55%);
  }
  50% {
    -webkit-clip-path: circle(49px at 6% 36%);
            clip-path: circle(49px at 6% 36%);
  }
  75% {
    -webkit-clip-path: circle(51px at 124% 42%);
            clip-path: circle(51px at 124% 42%);
  }
  100% {
    -webkit-clip-path: circle(75px at 84% 44%);
            clip-path: circle(75px at 84% 44%);
  }
}
#ui .text:nth-child(15) {
  color: #0f24a8;
  -webkit-animation: clip14 13611ms ease-in-out infinite alternate;
          animation: clip14 13611ms ease-in-out infinite alternate;
  filter: blur(14px);
}
@-webkit-keyframes clip14 {
  0% {
    -webkit-clip-path: circle(146px at 45% 50%);
            clip-path: circle(146px at 45% 50%);
  }
  25% {
    -webkit-clip-path: circle(101px at 88% 116%);
            clip-path: circle(101px at 88% 116%);
  }
  50% {
    -webkit-clip-path: circle(102px at 59% -14%);
            clip-path: circle(102px at 59% -14%);
  }
  75% {
    -webkit-clip-path: circle(130px at 112% 54%);
            clip-path: circle(130px at 112% 54%);
  }
  100% {
    -webkit-clip-path: circle(139px at 59% -8%);
            clip-path: circle(139px at 59% -8%);
  }
}
@keyframes clip14 {
  0% {
    -webkit-clip-path: circle(146px at 45% 50%);
            clip-path: circle(146px at 45% 50%);
  }
  25% {
    -webkit-clip-path: circle(101px at 88% 116%);
            clip-path: circle(101px at 88% 116%);
  }
  50% {
    -webkit-clip-path: circle(102px at 59% -14%);
            clip-path: circle(102px at 59% -14%);
  }
  75% {
    -webkit-clip-path: circle(130px at 112% 54%);
            clip-path: circle(130px at 112% 54%);
  }
  100% {
    -webkit-clip-path: circle(139px at 59% -8%);
            clip-path: circle(139px at 59% -8%);
  }
}
#ui .text:nth-child(16) {
  color: #0f15be;
  -webkit-animation: clip15 15750ms ease-in-out infinite alternate;
          animation: clip15 15750ms ease-in-out infinite alternate;
  filter: blur(-5px);
}
@-webkit-keyframes clip15 {
  0% {
    -webkit-clip-path: circle(124px at 44% 29%);
            clip-path: circle(124px at 44% 29%);
  }
  25% {
    -webkit-clip-path: circle(142px at -8% -19%);
            clip-path: circle(142px at -8% -19%);
  }
  50% {
    -webkit-clip-path: circle(112px at 111% 68%);
            clip-path: circle(112px at 111% 68%);
  }
  75% {
    -webkit-clip-path: circle(93px at 112% 40%);
            clip-path: circle(93px at 112% 40%);
  }
  100% {
    -webkit-clip-path: circle(85px at 83% 46%);
            clip-path: circle(85px at 83% 46%);
  }
}
@keyframes clip15 {
  0% {
    -webkit-clip-path: circle(124px at 44% 29%);
            clip-path: circle(124px at 44% 29%);
  }
  25% {
    -webkit-clip-path: circle(142px at -8% -19%);
            clip-path: circle(142px at -8% -19%);
  }
  50% {
    -webkit-clip-path: circle(112px at 111% 68%);
            clip-path: circle(112px at 111% 68%);
  }
  75% {
    -webkit-clip-path: circle(93px at 112% 40%);
            clip-path: circle(93px at 112% 40%);
  }
  100% {
    -webkit-clip-path: circle(85px at 83% 46%);
            clip-path: circle(85px at 83% 46%);
  }
}
#ui .text:nth-child(17) {
  color: #1e44d9;
  -webkit-animation: clip16 18994ms ease-in-out infinite alternate;
          animation: clip16 18994ms ease-in-out infinite alternate;
  filter: blur(4px);
}
@-webkit-keyframes clip16 {
  0% {
    -webkit-clip-path: circle(161px at -7% 21%);
            clip-path: circle(161px at -7% 21%);
  }
  25% {
    -webkit-clip-path: circle(113px at 105% -25%);
            clip-path: circle(113px at 105% -25%);
  }
  50% {
    -webkit-clip-path: circle(68px at 13% 55%);
            clip-path: circle(68px at 13% 55%);
  }
  75% {
    -webkit-clip-path: circle(110px at 43% 91%);
            clip-path: circle(110px at 43% 91%);
  }
  100% {
    -webkit-clip-path: circle(118px at 21% 106%);
            clip-path: circle(118px at 21% 106%);
  }
}
@keyframes clip16 {
  0% {
    -webkit-clip-path: circle(161px at -7% 21%);
            clip-path: circle(161px at -7% 21%);
  }
  25% {
    -webkit-clip-path: circle(113px at 105% -25%);
            clip-path: circle(113px at 105% -25%);
  }
  50% {
    -webkit-clip-path: circle(68px at 13% 55%);
            clip-path: circle(68px at 13% 55%);
  }
  75% {
    -webkit-clip-path: circle(110px at 43% 91%);
            clip-path: circle(110px at 43% 91%);
  }
  100% {
    -webkit-clip-path: circle(118px at 21% 106%);
            clip-path: circle(118px at 21% 106%);
  }
}
#ui .text:nth-child(18) {
  color: #150d96;
  -webkit-animation: clip17 13470ms ease-in-out infinite alternate;
          animation: clip17 13470ms ease-in-out infinite alternate;
  filter: blur(-4px);
}
@-webkit-keyframes clip17 {
  0% {
    -webkit-clip-path: circle(107px at 118% 49%);
            clip-path: circle(107px at 118% 49%);
  }
  25% {
    -webkit-clip-path: circle(102px at 81% 28%);
            clip-path: circle(102px at 81% 28%);
  }
  50% {
    -webkit-clip-path: circle(38px at 73% 95%);
            clip-path: circle(38px at 73% 95%);
  }
  75% {
    -webkit-clip-path: circle(170px at 18% 116%);
            clip-path: circle(170px at 18% 116%);
  }
  100% {
    -webkit-clip-path: circle(40px at 42% 111%);
            clip-path: circle(40px at 42% 111%);
  }
}
@keyframes clip17 {
  0% {
    -webkit-clip-path: circle(107px at 118% 49%);
            clip-path: circle(107px at 118% 49%);
  }
  25% {
    -webkit-clip-path: circle(102px at 81% 28%);
            clip-path: circle(102px at 81% 28%);
  }
  50% {
    -webkit-clip-path: circle(38px at 73% 95%);
            clip-path: circle(38px at 73% 95%);
  }
  75% {
    -webkit-clip-path: circle(170px at 18% 116%);
            clip-path: circle(170px at 18% 116%);
  }
  100% {
    -webkit-clip-path: circle(40px at 42% 111%);
            clip-path: circle(40px at 42% 111%);
  }
}
#ui .text:nth-child(19) {
  color: #0c5c94;
  -webkit-animation: clip18 10231ms ease-in-out infinite alternate;
          animation: clip18 10231ms ease-in-out infinite alternate;
  filter: blur(-5px);
}
@-webkit-keyframes clip18 {
  0% {
    -webkit-clip-path: circle(120px at -8% -11%);
            clip-path: circle(120px at -8% -11%);
  }
  25% {
    -webkit-clip-path: circle(100px at 107% 120%);
            clip-path: circle(100px at 107% 120%);
  }
  50% {
    -webkit-clip-path: circle(36px at 120% 76%);
            clip-path: circle(36px at 120% 76%);
  }
  75% {
    -webkit-clip-path: circle(176px at 117% 113%);
            clip-path: circle(176px at 117% 113%);
  }
  100% {
    -webkit-clip-path: circle(101px at 121% 7%);
            clip-path: circle(101px at 121% 7%);
  }
}
@keyframes clip18 {
  0% {
    -webkit-clip-path: circle(120px at -8% -11%);
            clip-path: circle(120px at -8% -11%);
  }
  25% {
    -webkit-clip-path: circle(100px at 107% 120%);
            clip-path: circle(100px at 107% 120%);
  }
  50% {
    -webkit-clip-path: circle(36px at 120% 76%);
            clip-path: circle(36px at 120% 76%);
  }
  75% {
    -webkit-clip-path: circle(176px at 117% 113%);
            clip-path: circle(176px at 117% 113%);
  }
  100% {
    -webkit-clip-path: circle(101px at 121% 7%);
            clip-path: circle(101px at 121% 7%);
  }
}
#ui .text:nth-child(20) {
  color: #183adb;
  -webkit-animation: clip19 11446ms ease-in-out infinite alternate;
          animation: clip19 11446ms ease-in-out infinite alternate;
  filter: blur(5px);
}
@-webkit-keyframes clip19 {
  0% {
    -webkit-clip-path: circle(59px at 126% 83%);
            clip-path: circle(59px at 126% 83%);
  }
  25% {
    -webkit-clip-path: circle(65px at 49% 123%);
            clip-path: circle(65px at 49% 123%);
  }
  50% {
    -webkit-clip-path: circle(54px at 92% 1%);
            clip-path: circle(54px at 92% 1%);
  }
  75% {
    -webkit-clip-path: circle(164px at 58% 75%);
            clip-path: circle(164px at 58% 75%);
  }
  100% {
    -webkit-clip-path: circle(157px at -10% 44%);
            clip-path: circle(157px at -10% 44%);
  }
}
@keyframes clip19 {
  0% {
    -webkit-clip-path: circle(59px at 126% 83%);
            clip-path: circle(59px at 126% 83%);
  }
  25% {
    -webkit-clip-path: circle(65px at 49% 123%);
            clip-path: circle(65px at 49% 123%);
  }
  50% {
    -webkit-clip-path: circle(54px at 92% 1%);
            clip-path: circle(54px at 92% 1%);
  }
  75% {
    -webkit-clip-path: circle(164px at 58% 75%);
            clip-path: circle(164px at 58% 75%);
  }
  100% {
    -webkit-clip-path: circle(157px at -10% 44%);
            clip-path: circle(157px at -10% 44%);
  }
}
#ui .text:nth-child(21) {
  color: #0b16c0;
  -webkit-animation: clip20 11744ms ease-in-out infinite alternate;
          animation: clip20 11744ms ease-in-out infinite alternate;
  filter: blur(-2px);
}
@-webkit-keyframes clip20 {
  0% {
    -webkit-clip-path: circle(119px at 95% 105%);
            clip-path: circle(119px at 95% 105%);
  }
  25% {
    -webkit-clip-path: circle(66px at 65% 48%);
            clip-path: circle(66px at 65% 48%);
  }
  50% {
    -webkit-clip-path: circle(96px at -11% 50%);
            clip-path: circle(96px at -11% 50%);
  }
  75% {
    -webkit-clip-path: circle(69px at 77% 43%);
            clip-path: circle(69px at 77% 43%);
  }
  100% {
    -webkit-clip-path: circle(39px at 85% 102%);
            clip-path: circle(39px at 85% 102%);
  }
}
@keyframes clip20 {
  0% {
    -webkit-clip-path: circle(119px at 95% 105%);
            clip-path: circle(119px at 95% 105%);
  }
  25% {
    -webkit-clip-path: circle(66px at 65% 48%);
            clip-path: circle(66px at 65% 48%);
  }
  50% {
    -webkit-clip-path: circle(96px at -11% 50%);
            clip-path: circle(96px at -11% 50%);
  }
  75% {
    -webkit-clip-path: circle(69px at 77% 43%);
            clip-path: circle(69px at 77% 43%);
  }
  100% {
    -webkit-clip-path: circle(39px at 85% 102%);
            clip-path: circle(39px at 85% 102%);
  }
}
#ui .text:nth-child(22) {
  color: #1455f0;
  -webkit-animation: clip21 10299ms ease-in-out infinite alternate;
          animation: clip21 10299ms ease-in-out infinite alternate;
  filter: blur(-4px);
}
@-webkit-keyframes clip21 {
  0% {
    -webkit-clip-path: circle(93px at 34% 94%);
            clip-path: circle(93px at 34% 94%);
  }
  25% {
    -webkit-clip-path: circle(123px at 38% 113%);
            clip-path: circle(123px at 38% 113%);
  }
  50% {
    -webkit-clip-path: circle(156px at 75% -7%);
            clip-path: circle(156px at 75% -7%);
  }
  75% {
    -webkit-clip-path: circle(167px at 11% 80%);
            clip-path: circle(167px at 11% 80%);
  }
  100% {
    -webkit-clip-path: circle(33px at -14% -18%);
            clip-path: circle(33px at -14% -18%);
  }
}
@keyframes clip21 {
  0% {
    -webkit-clip-path: circle(93px at 34% 94%);
            clip-path: circle(93px at 34% 94%);
  }
  25% {
    -webkit-clip-path: circle(123px at 38% 113%);
            clip-path: circle(123px at 38% 113%);
  }
  50% {
    -webkit-clip-path: circle(156px at 75% -7%);
            clip-path: circle(156px at 75% -7%);
  }
  75% {
    -webkit-clip-path: circle(167px at 11% 80%);
            clip-path: circle(167px at 11% 80%);
  }
  100% {
    -webkit-clip-path: circle(33px at -14% -18%);
            clip-path: circle(33px at -14% -18%);
  }
}
#ui .text:nth-child(23) {
  color: #085dba;
  -webkit-animation: clip22 12083ms ease-in-out infinite alternate;
          animation: clip22 12083ms ease-in-out infinite alternate;
  filter: blur(12px);
}
@-webkit-keyframes clip22 {
  0% {
    -webkit-clip-path: circle(58px at 102% 34%);
            clip-path: circle(58px at 102% 34%);
  }
  25% {
    -webkit-clip-path: circle(86px at -21% 23%);
            clip-path: circle(86px at -21% 23%);
  }
  50% {
    -webkit-clip-path: circle(155px at 69% 39%);
            clip-path: circle(155px at 69% 39%);
  }
  75% {
    -webkit-clip-path: circle(65px at 93% 28%);
            clip-path: circle(65px at 93% 28%);
  }
  100% {
    -webkit-clip-path: circle(67px at 41% 130%);
            clip-path: circle(67px at 41% 130%);
  }
}
@keyframes clip22 {
  0% {
    -webkit-clip-path: circle(58px at 102% 34%);
            clip-path: circle(58px at 102% 34%);
  }
  25% {
    -webkit-clip-path: circle(86px at -21% 23%);
            clip-path: circle(86px at -21% 23%);
  }
  50% {
    -webkit-clip-path: circle(155px at 69% 39%);
            clip-path: circle(155px at 69% 39%);
  }
  75% {
    -webkit-clip-path: circle(65px at 93% 28%);
            clip-path: circle(65px at 93% 28%);
  }
  100% {
    -webkit-clip-path: circle(67px at 41% 130%);
            clip-path: circle(67px at 41% 130%);
  }
}
#ui .text:nth-child(24) {
  color: #1c16d1;
  -webkit-animation: clip23 16911ms ease-in-out infinite alternate;
          animation: clip23 16911ms ease-in-out infinite alternate;
  filter: blur(6px);
}
@-webkit-keyframes clip23 {
  0% {
    -webkit-clip-path: circle(179px at 29% 15%);
            clip-path: circle(179px at 29% 15%);
  }
  25% {
    -webkit-clip-path: circle(98px at 89% 47%);
            clip-path: circle(98px at 89% 47%);
  }
  50% {
    -webkit-clip-path: circle(152px at 96% 10%);
            clip-path: circle(152px at 96% 10%);
  }
  75% {
    -webkit-clip-path: circle(129px at -6% 115%);
            clip-path: circle(129px at -6% 115%);
  }
  100% {
    -webkit-clip-path: circle(64px at 96% 117%);
            clip-path: circle(64px at 96% 117%);
  }
}
@keyframes clip23 {
  0% {
    -webkit-clip-path: circle(179px at 29% 15%);
            clip-path: circle(179px at 29% 15%);
  }
  25% {
    -webkit-clip-path: circle(98px at 89% 47%);
            clip-path: circle(98px at 89% 47%);
  }
  50% {
    -webkit-clip-path: circle(152px at 96% 10%);
            clip-path: circle(152px at 96% 10%);
  }
  75% {
    -webkit-clip-path: circle(129px at -6% 115%);
            clip-path: circle(129px at -6% 115%);
  }
  100% {
    -webkit-clip-path: circle(64px at 96% 117%);
            clip-path: circle(64px at 96% 117%);
  }
}
#ui .text:nth-child(25) {
  color: #0926c8;
  -webkit-animation: clip24 14771ms ease-in-out infinite alternate;
          animation: clip24 14771ms ease-in-out infinite alternate;
  filter: blur(-5px);
}
@-webkit-keyframes clip24 {
  0% {
    -webkit-clip-path: circle(125px at -13% -7%);
            clip-path: circle(125px at -13% -7%);
  }
  25% {
    -webkit-clip-path: circle(143px at 111% -21%);
            clip-path: circle(143px at 111% -21%);
  }
  50% {
    -webkit-clip-path: circle(178px at 15% -9%);
            clip-path: circle(178px at 15% -9%);
  }
  75% {
    -webkit-clip-path: circle(40px at -7% 16%);
            clip-path: circle(40px at -7% 16%);
  }
  100% {
    -webkit-clip-path: circle(169px at 112% -2%);
            clip-path: circle(169px at 112% -2%);
  }
}
@keyframes clip24 {
  0% {
    -webkit-clip-path: circle(125px at -13% -7%);
            clip-path: circle(125px at -13% -7%);
  }
  25% {
    -webkit-clip-path: circle(143px at 111% -21%);
            clip-path: circle(143px at 111% -21%);
  }
  50% {
    -webkit-clip-path: circle(178px at 15% -9%);
            clip-path: circle(178px at 15% -9%);
  }
  75% {
    -webkit-clip-path: circle(40px at -7% 16%);
            clip-path: circle(40px at -7% 16%);
  }
  100% {
    -webkit-clip-path: circle(169px at 112% -2%);
            clip-path: circle(169px at 112% -2%);
  }
}
#ui .text:nth-child(26) {
  color: #052574;
  -webkit-animation: clip25 19194ms ease-in-out infinite alternate;
          animation: clip25 19194ms ease-in-out infinite alternate;
  filter: blur(14px);
}
@-webkit-keyframes clip25 {
  0% {
    -webkit-clip-path: circle(138px at 23% 44%);
            clip-path: circle(138px at 23% 44%);
  }
  25% {
    -webkit-clip-path: circle(141px at 64% -28%);
            clip-path: circle(141px at 64% -28%);
  }
  50% {
    -webkit-clip-path: circle(56px at -18% -13%);
            clip-path: circle(56px at -18% -13%);
  }
  75% {
    -webkit-clip-path: circle(32px at 74% -17%);
            clip-path: circle(32px at 74% -17%);
  }
  100% {
    -webkit-clip-path: circle(71px at 117% 47%);
            clip-path: circle(71px at 117% 47%);
  }
}
@keyframes clip25 {
  0% {
    -webkit-clip-path: circle(138px at 23% 44%);
            clip-path: circle(138px at 23% 44%);
  }
  25% {
    -webkit-clip-path: circle(141px at 64% -28%);
            clip-path: circle(141px at 64% -28%);
  }
  50% {
    -webkit-clip-path: circle(56px at -18% -13%);
            clip-path: circle(56px at -18% -13%);
  }
  75% {
    -webkit-clip-path: circle(32px at 74% -17%);
            clip-path: circle(32px at 74% -17%);
  }
  100% {
    -webkit-clip-path: circle(71px at 117% 47%);
            clip-path: circle(71px at 117% 47%);
  }
}
#ui .text:nth-child(27) {
  color: #0e33c5;
  -webkit-animation: clip26 12728ms ease-in-out infinite alternate;
          animation: clip26 12728ms ease-in-out infinite alternate;
  filter: blur(6px);
}
@-webkit-keyframes clip26 {
  0% {
    -webkit-clip-path: circle(131px at 48% -22%);
            clip-path: circle(131px at 48% -22%);
  }
  25% {
    -webkit-clip-path: circle(57px at 82% 52%);
            clip-path: circle(57px at 82% 52%);
  }
  50% {
    -webkit-clip-path: circle(159px at 82% 117%);
            clip-path: circle(159px at 82% 117%);
  }
  75% {
    -webkit-clip-path: circle(81px at -4% 110%);
            clip-path: circle(81px at -4% 110%);
  }
  100% {
    -webkit-clip-path: circle(131px at 80% 53%);
            clip-path: circle(131px at 80% 53%);
  }
}
@keyframes clip26 {
  0% {
    -webkit-clip-path: circle(131px at 48% -22%);
            clip-path: circle(131px at 48% -22%);
  }
  25% {
    -webkit-clip-path: circle(57px at 82% 52%);
            clip-path: circle(57px at 82% 52%);
  }
  50% {
    -webkit-clip-path: circle(159px at 82% 117%);
            clip-path: circle(159px at 82% 117%);
  }
  75% {
    -webkit-clip-path: circle(81px at -4% 110%);
            clip-path: circle(81px at -4% 110%);
  }
  100% {
    -webkit-clip-path: circle(131px at 80% 53%);
            clip-path: circle(131px at 80% 53%);
  }
}
#ui .text:nth-child(28) {
  color: #1345bb;
  -webkit-animation: clip27 17950ms ease-in-out infinite alternate;
          animation: clip27 17950ms ease-in-out infinite alternate;
  filter: blur(0px);
}
@-webkit-keyframes clip27 {
  0% {
    -webkit-clip-path: circle(67px at -8% -19%);
            clip-path: circle(67px at -8% -19%);
  }
  25% {
    -webkit-clip-path: circle(175px at 35% 90%);
            clip-path: circle(175px at 35% 90%);
  }
  50% {
    -webkit-clip-path: circle(177px at 30% 7%);
            clip-path: circle(177px at 30% 7%);
  }
  75% {
    -webkit-clip-path: circle(113px at 123% 23%);
            clip-path: circle(113px at 123% 23%);
  }
  100% {
    -webkit-clip-path: circle(111px at -21% -25%);
            clip-path: circle(111px at -21% -25%);
  }
}
@keyframes clip27 {
  0% {
    -webkit-clip-path: circle(67px at -8% -19%);
            clip-path: circle(67px at -8% -19%);
  }
  25% {
    -webkit-clip-path: circle(175px at 35% 90%);
            clip-path: circle(175px at 35% 90%);
  }
  50% {
    -webkit-clip-path: circle(177px at 30% 7%);
            clip-path: circle(177px at 30% 7%);
  }
  75% {
    -webkit-clip-path: circle(113px at 123% 23%);
            clip-path: circle(113px at 123% 23%);
  }
  100% {
    -webkit-clip-path: circle(111px at -21% -25%);
            clip-path: circle(111px at -21% -25%);
  }
}
#ui .text:nth-child(29) {
  color: #142eb0;
  -webkit-animation: clip28 16600ms ease-in-out infinite alternate;
          animation: clip28 16600ms ease-in-out infinite alternate;
  filter: blur(4px);
}
@-webkit-keyframes clip28 {
  0% {
    -webkit-clip-path: circle(31px at 28% 85%);
            clip-path: circle(31px at 28% 85%);
  }
  25% {
    -webkit-clip-path: circle(160px at 89% 113%);
            clip-path: circle(160px at 89% 113%);
  }
  50% {
    -webkit-clip-path: circle(124px at 74% 85%);
            clip-path: circle(124px at 74% 85%);
  }
  75% {
    -webkit-clip-path: circle(62px at 42% 43%);
            clip-path: circle(62px at 42% 43%);
  }
  100% {
    -webkit-clip-path: circle(153px at 122% 128%);
            clip-path: circle(153px at 122% 128%);
  }
}
@keyframes clip28 {
  0% {
    -webkit-clip-path: circle(31px at 28% 85%);
            clip-path: circle(31px at 28% 85%);
  }
  25% {
    -webkit-clip-path: circle(160px at 89% 113%);
            clip-path: circle(160px at 89% 113%);
  }
  50% {
    -webkit-clip-path: circle(124px at 74% 85%);
            clip-path: circle(124px at 74% 85%);
  }
  75% {
    -webkit-clip-path: circle(62px at 42% 43%);
            clip-path: circle(62px at 42% 43%);
  }
  100% {
    -webkit-clip-path: circle(153px at 122% 128%);
            clip-path: circle(153px at 122% 128%);
  }
}
#ui .text:nth-child(30) {
  color: #064998;
  -webkit-animation: clip29 11160ms ease-in-out infinite alternate;
          animation: clip29 11160ms ease-in-out infinite alternate;
  filter: blur(4px);
}
@-webkit-keyframes clip29 {
  0% {
    -webkit-clip-path: circle(43px at 93% -24%);
            clip-path: circle(43px at 93% -24%);
  }
  25% {
    -webkit-clip-path: circle(143px at -25% 82%);
            clip-path: circle(143px at -25% 82%);
  }
  50% {
    -webkit-clip-path: circle(180px at 8% -23%);
            clip-path: circle(180px at 8% -23%);
  }
  75% {
    -webkit-clip-path: circle(89px at 94% 125%);
            clip-path: circle(89px at 94% 125%);
  }
  100% {
    -webkit-clip-path: circle(126px at 113% 117%);
            clip-path: circle(126px at 113% 117%);
  }
}
@keyframes clip29 {
  0% {
    -webkit-clip-path: circle(43px at 93% -24%);
            clip-path: circle(43px at 93% -24%);
  }
  25% {
    -webkit-clip-path: circle(143px at -25% 82%);
            clip-path: circle(143px at -25% 82%);
  }
  50% {
    -webkit-clip-path: circle(180px at 8% -23%);
            clip-path: circle(180px at 8% -23%);
  }
  75% {
    -webkit-clip-path: circle(89px at 94% 125%);
            clip-path: circle(89px at 94% 125%);
  }
  100% {
    -webkit-clip-path: circle(126px at 113% 117%);
            clip-path: circle(126px at 113% 117%);
  }
}
#ui .text:nth-child(31) {
  color: #0c6082;
  -webkit-animation: clip30 15815ms ease-in-out infinite alternate;
          animation: clip30 15815ms ease-in-out infinite alternate;
  filter: blur(-5px);
}
@-webkit-keyframes clip30 {
  0% {
    -webkit-clip-path: circle(96px at 43% 69%);
            clip-path: circle(96px at 43% 69%);
  }
  25% {
    -webkit-clip-path: circle(126px at 70% -29%);
            clip-path: circle(126px at 70% -29%);
  }
  50% {
    -webkit-clip-path: circle(73px at 25% 128%);
            clip-path: circle(73px at 25% 128%);
  }
  75% {
    -webkit-clip-path: circle(162px at 82% 113%);
            clip-path: circle(162px at 82% 113%);
  }
  100% {
    -webkit-clip-path: circle(170px at 123% 59%);
            clip-path: circle(170px at 123% 59%);
  }
}
@keyframes clip30 {
  0% {
    -webkit-clip-path: circle(96px at 43% 69%);
            clip-path: circle(96px at 43% 69%);
  }
  25% {
    -webkit-clip-path: circle(126px at 70% -29%);
            clip-path: circle(126px at 70% -29%);
  }
  50% {
    -webkit-clip-path: circle(73px at 25% 128%);
            clip-path: circle(73px at 25% 128%);
  }
  75% {
    -webkit-clip-path: circle(162px at 82% 113%);
            clip-path: circle(162px at 82% 113%);
  }
  100% {
    -webkit-clip-path: circle(170px at 123% 59%);
            clip-path: circle(170px at 123% 59%);
  }
}
#ui .text:nth-child(32) {
  color: #17317c;
  -webkit-animation: clip31 19463ms ease-in-out infinite alternate;
          animation: clip31 19463ms ease-in-out infinite alternate;
  filter: blur(-1px);
}
@-webkit-keyframes clip31 {
  0% {
    -webkit-clip-path: circle(126px at 36% -14%);
            clip-path: circle(126px at 36% -14%);
  }
  25% {
    -webkit-clip-path: circle(143px at 50% 51%);
            clip-path: circle(143px at 50% 51%);
  }
  50% {
    -webkit-clip-path: circle(61px at 121% 129%);
            clip-path: circle(61px at 121% 129%);
  }
  75% {
    -webkit-clip-path: circle(101px at 127% 112%);
            clip-path: circle(101px at 127% 112%);
  }
  100% {
    -webkit-clip-path: circle(174px at 111% 127%);
            clip-path: circle(174px at 111% 127%);
  }
}
@keyframes clip31 {
  0% {
    -webkit-clip-path: circle(126px at 36% -14%);
            clip-path: circle(126px at 36% -14%);
  }
  25% {
    -webkit-clip-path: circle(143px at 50% 51%);
            clip-path: circle(143px at 50% 51%);
  }
  50% {
    -webkit-clip-path: circle(61px at 121% 129%);
            clip-path: circle(61px at 121% 129%);
  }
  75% {
    -webkit-clip-path: circle(101px at 127% 112%);
            clip-path: circle(101px at 127% 112%);
  }
  100% {
    -webkit-clip-path: circle(174px at 111% 127%);
            clip-path: circle(174px at 111% 127%);
  }
}
#ui .text:nth-child(33) {
  color: #016390;
  -webkit-animation: clip32 16016ms ease-in-out infinite alternate;
          animation: clip32 16016ms ease-in-out infinite alternate;
  filter: blur(14px);
}
@-webkit-keyframes clip32 {
  0% {
    -webkit-clip-path: circle(105px at -28% -9%);
            clip-path: circle(105px at -28% -9%);
  }
  25% {
    -webkit-clip-path: circle(94px at 124% 45%);
            clip-path: circle(94px at 124% 45%);
  }
  50% {
    -webkit-clip-path: circle(118px at 84% -5%);
            clip-path: circle(118px at 84% -5%);
  }
  75% {
    -webkit-clip-path: circle(74px at -11% 116%);
            clip-path: circle(74px at -11% 116%);
  }
  100% {
    -webkit-clip-path: circle(146px at -20% 121%);
            clip-path: circle(146px at -20% 121%);
  }
}
@keyframes clip32 {
  0% {
    -webkit-clip-path: circle(105px at -28% -9%);
            clip-path: circle(105px at -28% -9%);
  }
  25% {
    -webkit-clip-path: circle(94px at 124% 45%);
            clip-path: circle(94px at 124% 45%);
  }
  50% {
    -webkit-clip-path: circle(118px at 84% -5%);
            clip-path: circle(118px at 84% -5%);
  }
  75% {
    -webkit-clip-path: circle(74px at -11% 116%);
            clip-path: circle(74px at -11% 116%);
  }
  100% {
    -webkit-clip-path: circle(146px at -20% 121%);
            clip-path: circle(146px at -20% 121%);
  }
}
#ui .text:nth-child(34) {
  color: #024d92;
  -webkit-animation: clip33 12324ms ease-in-out infinite alternate;
          animation: clip33 12324ms ease-in-out infinite alternate;
  filter: blur(4px);
}
@-webkit-keyframes clip33 {
  0% {
    -webkit-clip-path: circle(100px at 72% 32%);
            clip-path: circle(100px at 72% 32%);
  }
  25% {
    -webkit-clip-path: circle(155px at -3% 34%);
            clip-path: circle(155px at -3% 34%);
  }
  50% {
    -webkit-clip-path: circle(69px at -1% 12%);
            clip-path: circle(69px at -1% 12%);
  }
  75% {
    -webkit-clip-path: circle(168px at 39% 71%);
            clip-path: circle(168px at 39% 71%);
  }
  100% {
    -webkit-clip-path: circle(137px at 36% 49%);
            clip-path: circle(137px at 36% 49%);
  }
}
@keyframes clip33 {
  0% {
    -webkit-clip-path: circle(100px at 72% 32%);
            clip-path: circle(100px at 72% 32%);
  }
  25% {
    -webkit-clip-path: circle(155px at -3% 34%);
            clip-path: circle(155px at -3% 34%);
  }
  50% {
    -webkit-clip-path: circle(69px at -1% 12%);
            clip-path: circle(69px at -1% 12%);
  }
  75% {
    -webkit-clip-path: circle(168px at 39% 71%);
            clip-path: circle(168px at 39% 71%);
  }
  100% {
    -webkit-clip-path: circle(137px at 36% 49%);
            clip-path: circle(137px at 36% 49%);
  }
}
#ui .text:nth-child(35) {
  color: #0244cb;
  -webkit-animation: clip34 10229ms ease-in-out infinite alternate;
          animation: clip34 10229ms ease-in-out infinite alternate;
  filter: blur(13px);
}
@-webkit-keyframes clip34 {
  0% {
    -webkit-clip-path: circle(100px at 34% 97%);
          .........完整代码请登录后点击上方下载按钮下载查看