div+css实现文字探照灯圣诞快乐动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+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: #1e3afe;
  -webkit-animation: clip0 15035ms ease-in-out infinite alternate;
          animation: clip0 15035ms ease-in-out infinite alternate;
  filter: blur(2px);
}
@-webkit-keyframes clip0 {
  0% {
    -webkit-clip-path: circle(103px at 116% 50%);
            clip-path: circle(103px at 116% 50%);
  }
  25% {
    -webkit-clip-path: circle(139px at 124% 87%);
            clip-path: circle(139px at 124% 87%);
  }
  50% {
    -webkit-clip-path: circle(90px at 7% 37%);
            clip-path: circle(90px at 7% 37%);
  }
  75% {
    -webkit-clip-path: circle(105px at 35% -24%);
            clip-path: circle(105px at 35% -24%);
  }
  100% {
    -webkit-clip-path: circle(48px at 61% 0%);
            clip-path: circle(48px at 61% 0%);
  }
}
@keyframes clip0 {
  0% {
    -webkit-clip-path: circle(103px at 116% 50%);
            clip-path: circle(103px at 116% 50%);
  }
  25% {
    -webkit-clip-path: circle(139px at 124% 87%);
            clip-path: circle(139px at 124% 87%);
  }
  50% {
    -webkit-clip-path: circle(90px at 7% 37%);
            clip-path: circle(90px at 7% 37%);
  }
  75% {
    -webkit-clip-path: circle(105px at 35% -24%);
            clip-path: circle(105px at 35% -24%);
  }
  100% {
    -webkit-clip-path: circle(48px at 61% 0%);
            clip-path: circle(48px at 61% 0%);
  }
}
#ui .text:nth-child(2) {
  color: #0e0ff0;
  -webkit-animation: clip1 19430ms ease-in-out infinite alternate;
          animation: clip1 19430ms ease-in-out infinite alternate;
  filter: blur(-2px);
}
@-webkit-keyframes clip1 {
  0% {
    -webkit-clip-path: circle(144px at 31% 87%);
            clip-path: circle(144px at 31% 87%);
  }
  25% {
    -webkit-clip-path: circle(117px at 53% 26%);
            clip-path: circle(117px at 53% 26%);
  }
  50% {
    -webkit-clip-path: circle(171px at 99% 56%);
            clip-path: circle(171px at 99% 56%);
  }
  75% {
    -webkit-clip-path: circle(174px at 21% -7%);
            clip-path: circle(174px at 21% -7%);
  }
  100% {
    -webkit-clip-path: circle(79px at -9% -2%);
            clip-path: circle(79px at -9% -2%);
  }
}
@keyframes clip1 {
  0% {
    -webkit-clip-path: circle(144px at 31% 87%);
            clip-path: circle(144px at 31% 87%);
  }
  25% {
    -webkit-clip-path: circle(117px at 53% 26%);
            clip-path: circle(117px at 53% 26%);
  }
  50% {
    -webkit-clip-path: circle(171px at 99% 56%);
            clip-path: circle(171px at 99% 56%);
  }
  75% {
    -webkit-clip-path: circle(174px at 21% -7%);
            clip-path: circle(174px at 21% -7%);
  }
  100% {
    -webkit-clip-path: circle(79px at -9% -2%);
            clip-path: circle(79px at -9% -2%);
  }
}
#ui .text:nth-child(3) {
  color: #0410ea;
  -webkit-animation: clip2 11973ms ease-in-out infinite alternate;
          animation: clip2 11973ms ease-in-out infinite alternate;
  filter: blur(-1px);
}
@-webkit-keyframes clip2 {
  0% {
    -webkit-clip-path: circle(175px at 41% 60%);
            clip-path: circle(175px at 41% 60%);
  }
  25% {
    -webkit-clip-path: circle(134px at -4% 4%);
            clip-path: circle(134px at -4% 4%);
  }
  50% {
    -webkit-clip-path: circle(95px at 89% -10%);
            clip-path: circle(95px at 89% -10%);
  }
  75% {
    -webkit-clip-path: circle(140px at 119% 26%);
            clip-path: circle(140px at 119% 26%);
  }
  100% {
    -webkit-clip-path: circle(46px at 34% 26%);
            clip-path: circle(46px at 34% 26%);
  }
}
@keyframes clip2 {
  0% {
    -webkit-clip-path: circle(175px at 41% 60%);
            clip-path: circle(175px at 41% 60%);
  }
  25% {
    -webkit-clip-path: circle(134px at -4% 4%);
            clip-path: circle(134px at -4% 4%);
  }
  50% {
    -webkit-clip-path: circle(95px at 89% -10%);
            clip-path: circle(95px at 89% -10%);
  }
  75% {
    -webkit-clip-path: circle(140px at 119% 26%);
            clip-path: circle(140px at 119% 26%);
  }
  100% {
    -webkit-clip-path: circle(46px at 34% 26%);
            clip-path: circle(46px at 34% 26%);
  }
}
#ui .text:nth-child(4) {
  color: #0b4cdb;
  -webkit-animation: clip3 18830ms ease-in-out infinite alternate;
          animation: clip3 18830ms ease-in-out infinite alternate;
  filter: blur(-4px);
}
@-webkit-keyframes clip3 {
  0% {
    -webkit-clip-path: circle(34px at 77% 2%);
            clip-path: circle(34px at 77% 2%);
  }
  25% {
    -webkit-clip-path: circle(117px at 87% 63%);
            clip-path: circle(117px at 87% 63%);
  }
  50% {
    -webkit-clip-path: circle(162px at 130% 33%);
            clip-path: circle(162px at 130% 33%);
  }
  75% {
    -webkit-clip-path: circle(127px at 40% 33%);
            clip-path: circle(127px at 40% 33%);
  }
  100% {
    -webkit-clip-path: circle(145px at 66% 0%);
            clip-path: circle(145px at 66% 0%);
  }
}
@keyframes clip3 {
  0% {
    -webkit-clip-path: circle(34px at 77% 2%);
            clip-path: circle(34px at 77% 2%);
  }
  25% {
    -webkit-clip-path: circle(117px at 87% 63%);
            clip-path: circle(117px at 87% 63%);
  }
  50% {
    -webkit-clip-path: circle(162px at 130% 33%);
            clip-path: circle(162px at 130% 33%);
  }
  75% {
    -webkit-clip-path: circle(127px at 40% 33%);
            clip-path: circle(127px at 40% 33%);
  }
  100% {
    -webkit-clip-path: circle(145px at 66% 0%);
            clip-path: circle(145px at 66% 0%);
  }
}
#ui .text:nth-child(5) {
  color: #0c15ba;
  -webkit-animation: clip4 17922ms ease-in-out infinite alternate;
          animation: clip4 17922ms ease-in-out infinite alternate;
  filter: blur(11px);
}
@-webkit-keyframes clip4 {
  0% {
    -webkit-clip-path: circle(105px at 49% 43%);
            clip-path: circle(105px at 49% 43%);
  }
  25% {
    -webkit-clip-path: circle(87px at 29% 38%);
            clip-path: circle(87px at 29% 38%);
  }
  50% {
    -webkit-clip-path: circle(101px at 39% 44%);
            clip-path: circle(101px at 39% 44%);
  }
  75% {
    -webkit-clip-path: circle(76px at 21% 54%);
            clip-path: circle(76px at 21% 54%);
  }
  100% {
    -webkit-clip-path: circle(50px at 101% 58%);
            clip-path: circle(50px at 101% 58%);
  }
}
@keyframes clip4 {
  0% {
    -webkit-clip-path: circle(105px at 49% 43%);
            clip-path: circle(105px at 49% 43%);
  }
  25% {
    -webkit-clip-path: circle(87px at 29% 38%);
            clip-path: circle(87px at 29% 38%);
  }
  50% {
    -webkit-clip-path: circle(101px at 39% 44%);
            clip-path: circle(101px at 39% 44%);
  }
  75% {
    -webkit-clip-path: circle(76px at 21% 54%);
            clip-path: circle(76px at 21% 54%);
  }
  100% {
    -webkit-clip-path: circle(50px at 101% 58%);
            clip-path: circle(50px at 101% 58%);
  }
}
#ui .text:nth-child(6) {
  color: #06207b;
  -webkit-animation: clip5 13309ms ease-in-out infinite alternate;
          animation: clip5 13309ms ease-in-out infinite alternate;
  filter: blur(11px);
}
@-webkit-keyframes clip5 {
  0% {
    -webkit-clip-path: circle(110px at -2% -2%);
            clip-path: circle(110px at -2% -2%);
  }
  25% {
    -webkit-clip-path: circle(168px at 3% 54%);
            clip-path: circle(168px at 3% 54%);
  }
  50% {
    -webkit-clip-path: circle(173px at 25% -22%);
            clip-path: circle(173px at 25% -22%);
  }
  75% {
    -webkit-clip-path: circle(170px at -16% 109%);
            clip-path: circle(170px at -16% 109%);
  }
  100% {
    -webkit-clip-path: circle(84px at 19% 16%);
            clip-path: circle(84px at 19% 16%);
  }
}
@keyframes clip5 {
  0% {
    -webkit-clip-path: circle(110px at -2% -2%);
            clip-path: circle(110px at -2% -2%);
  }
  25% {
    -webkit-clip-path: circle(168px at 3% 54%);
            clip-path: circle(168px at 3% 54%);
  }
  50% {
    -webkit-clip-path: circle(173px at 25% -22%);
            clip-path: circle(173px at 25% -22%);
  }
  75% {
    -webkit-clip-path: circle(170px at -16% 109%);
            clip-path: circle(170px at -16% 109%);
  }
  100% {
    -webkit-clip-path: circle(84px at 19% 16%);
            clip-path: circle(84px at 19% 16%);
  }
}
#ui .text:nth-child(7) {
  color: #1d28ef;
  -webkit-animation: clip6 18554ms ease-in-out infinite alternate;
          animation: clip6 18554ms ease-in-out infinite alternate;
  filter: blur(6px);
}
@-webkit-keyframes clip6 {
  0% {
    -webkit-clip-path: circle(65px at 57% 127%);
            clip-path: circle(65px at 57% 127%);
  }
  25% {
    -webkit-clip-path: circle(52px at 53% -22%);
            clip-path: circle(52px at 53% -22%);
  }
  50% {
    -webkit-clip-path: circle(84px at 6% 78%);
            clip-path: circle(84px at 6% 78%);
  }
  75% {
    -webkit-clip-path: circle(59px at 48% 7%);
            clip-path: circle(59px at 48% 7%);
  }
  100% {
    -webkit-clip-path: circle(103px at 119% 101%);
            clip-path: circle(103px at 119% 101%);
  }
}
@keyframes clip6 {
  0% {
    -webkit-clip-path: circle(65px at 57% 127%);
            clip-path: circle(65px at 57% 127%);
  }
  25% {
    -webkit-clip-path: circle(52px at 53% -22%);
            clip-path: circle(52px at 53% -22%);
  }
  50% {
    -webkit-clip-path: circle(84px at 6% 78%);
            clip-path: circle(84px at 6% 78%);
  }
  75% {
    -webkit-clip-path: circle(59px at 48% 7%);
            clip-path: circle(59px at 48% 7%);
  }
  100% {
    -webkit-clip-path: circle(103px at 119% 101%);
            clip-path: circle(103px at 119% 101%);
  }
}
#ui .text:nth-child(8) {
  color: #1513e5;
  -webkit-animation: clip7 14429ms ease-in-out infinite alternate;
          animation: clip7 14429ms ease-in-out infinite alternate;
  filter: blur(-4px);
}
@-webkit-keyframes clip7 {
  0% {
    -webkit-clip-path: circle(121px at 3% 76%);
            clip-path: circle(121px at 3% 76%);
  }
  25% {
    -webkit-clip-path: circle(80px at -18% 38%);
            clip-path: circle(80px at -18% 38%);
  }
  50% {
    -webkit-clip-path: circle(170px at 116% 58%);
            clip-path: circle(170px at 116% 58%);
  }
  75% {
    -webkit-clip-path: circle(126px at 12% 50%);
            clip-path: circle(126px at 12% 50%);
  }
  100% {
    -webkit-clip-path: circle(142px at 118% -23%);
            clip-path: circle(142px at 118% -23%);
  }
}
@keyframes clip7 {
  0% {
    -webkit-clip-path: circle(121px at 3% 76%);
            clip-path: circle(121px at 3% 76%);
  }
  25% {
    -webkit-clip-path: circle(80px at -18% 38%);
            clip-path: circle(80px at -18% 38%);
  }
  50% {
    -webkit-clip-path: circle(170px at 116% 58%);
            clip-path: circle(170px at 116% 58%);
  }
  75% {
    -webkit-clip-path: circle(126px at 12% 50%);
            clip-path: circle(126px at 12% 50%);
  }
  100% {
    -webkit-clip-path: circle(142px at 118% -23%);
            clip-path: circle(142px at 118% -23%);
  }
}
#ui .text:nth-child(9) {
  color: #031abf;
  -webkit-animation: clip8 12966ms ease-in-out infinite alternate;
          animation: clip8 12966ms ease-in-out infinite alternate;
  filter: blur(10px);
}
@-webkit-keyframes clip8 {
  0% {
    -webkit-clip-path: circle(160px at 23% 82%);
            clip-path: circle(160px at 23% 82%);
  }
  25% {
    -webkit-clip-path: circle(98px at 85% 95%);
            clip-path: circle(98px at 85% 95%);
  }
  50% {
    -webkit-clip-path: circle(91px at 21% 65%);
            clip-path: circle(91px at 21% 65%);
  }
  75% {
    -webkit-clip-path: circle(169px at 73% 41%);
            clip-path: circle(169px at 73% 41%);
  }
  100% {
    -webkit-clip-path: circle(141px at 15% -14%);
            clip-path: circle(141px at 15% -14%);
  }
}
@keyframes clip8 {
  0% {
    -webkit-clip-path: circle(160px at 23% 82%);
            clip-path: circle(160px at 23% 82%);
  }
  25% {
    -webkit-clip-path: circle(98px at 85% 95%);
            clip-path: circle(98px at 85% 95%);
  }
  50% {
    -webkit-clip-path: circle(91px at 21% 65%);
            clip-path: circle(91px at 21% 65%);
  }
  75% {
    -webkit-clip-path: circle(169px at 73% 41%);
            clip-path: circle(169px at 73% 41%);
  }
  100% {
    -webkit-clip-path: circle(141px at 15% -14%);
            clip-path: circle(141px at 15% -14%);
  }
}
#ui .text:nth-child(10) {
  color: #140af0;
  -webkit-animation: clip9 10257ms ease-in-out infinite alternate;
          animation: clip9 10257ms ease-in-out infinite alternate;
  filter: blur(-9px);
}
@-webkit-keyframes clip9 {
  0% {
    -webkit-clip-path: circle(146px at 37% 88%);
            clip-path: circle(146px at 37% 88%);
  }
  25% {
    -webkit-clip-path: circle(37px at 102% 96%);
            clip-path: circle(37px at 102% 96%);
  }
  50% {
    -webkit-clip-path: circle(82px at 49% 50%);
            clip-path: circle(82px at 49% 50%);
  }
  75% {
    -webkit-clip-path: circle(86px at 47% 89%);
            clip-path: circle(86px at 47% 89%);
  }
  100% {
    -webkit-clip-path: circle(169px at 70% 74%);
            clip-path: circle(169px at 70% 74%);
  }
}
@keyframes clip9 {
  0% {
    -webkit-clip-path: circle(146px at 37% 88%);
            clip-path: circle(146px at 37% 88%);
  }
  25% {
    -webkit-clip-path: circle(37px at 102% 96%);
            clip-path: circle(37px at 102% 96%);
  }
  50% {
    -webkit-clip-path: circle(82px at 49% 50%);
            clip-path: circle(82px at 49% 50%);
  }
  75% {
    -webkit-clip-path: circle(86px at 47% 89%);
            clip-path: circle(86px at 47% 89%);
  }
  100% {
    -webkit-clip-path: circle(169px at 70% 74%);
            clip-path: circle(169px at 70% 74%);
  }
}
#ui .text:nth-child(11) {
  color: #0d2bda;
  -webkit-animation: clip10 19574ms ease-in-out infinite alternate;
          animation: clip10 19574ms ease-in-out infinite alternate;
  filter: blur(-7px);
}
@-webkit-keyframes clip10 {
  0% {
    -webkit-clip-path: circle(104px at -3% 112%);
            clip-path: circle(104px at -3% 112%);
  }
  25% {
    -webkit-clip-path: circle(104px at 114% -25%);
            clip-path: circle(104px at 114% -25%);
  }
  50% {
    -webkit-clip-path: circle(89px at 52% -17%);
            clip-path: circle(89px at 52% -17%);
  }
  75% {
    -webkit-clip-path: circle(89px at 12% 65%);
            clip-path: circle(89px at 12% 65%);
  }
  100% {
    -webkit-clip-path: circle(45px at 14% 41%);
            clip-path: circle(45px at 14% 41%);
  }
}
@keyframes clip10 {
  0% {
    -webkit-clip-path: circle(104px at -3% 112%);
            clip-path: circle(104px at -3% 112%);
  }
  25% {
    -webkit-clip-path: circle(104px at 114% -25%);
            clip-path: circle(104px at 114% -25%);
  }
  50% {
    -webkit-clip-path: circle(89px at 52% -17%);
            clip-path: circle(89px at 52% -17%);
  }
  75% {
    -webkit-clip-path: circle(89px at 12% 65%);
            clip-path: circle(89px at 12% 65%);
  }
  100% {
    -webkit-clip-path: circle(45px at 14% 41%);
            clip-path: circle(45px at 14% 41%);
  }
}
#ui .text:nth-child(12) {
  color: #023e75;
  -webkit-animation: clip11 12027ms ease-in-out infinite alternate;
          animation: clip11 12027ms ease-in-out infinite alternate;
  filter: blur(13px);
}
@-webkit-keyframes clip11 {
  0% {
    -webkit-clip-path: circle(44px at 129% 52%);
            clip-path: circle(44px at 129% 52%);
  }
  25% {
    -webkit-clip-path: circle(72px at -29% -23%);
            clip-path: circle(72px at -29% -23%);
  }
  50% {
    -webkit-clip-path: circle(127px at 72% 4%);
            clip-path: circle(127px at 72% 4%);
  }
  75% {
    -webkit-clip-path: circle(156px at 114% 31%);
            clip-path: circle(156px at 114% 31%);
  }
  100% {
    -webkit-clip-path: circle(91px at -15% 117%);
            clip-path: circle(91px at -15% 117%);
  }
}
@keyframes clip11 {
  0% {
    -webkit-clip-path: circle(44px at 129% 52%);
            clip-path: circle(44px at 129% 52%);
  }
  25% {
    -webkit-clip-path: circle(72px at -29% -23%);
            clip-path: circle(72px at -29% -23%);
  }
  50% {
    -webkit-clip-path: circle(127px at 72% 4%);
            clip-path: circle(127px at 72% 4%);
  }
  75% {
    -webkit-clip-path: circle(156px at 114% 31%);
            clip-path: circle(156px at 114% 31%);
  }
  100% {
    -webkit-clip-path: circle(91px at -15% 117%);
            clip-path: circle(91px at -15% 117%);
  }
}
#ui .text:nth-child(13) {
  color: #0a188a;
  -webkit-animation: clip12 16733ms ease-in-out infinite alternate;
          animation: clip12 16733ms ease-in-out infinite alternate;
  filter: blur(-9px);
}
@-webkit-keyframes clip12 {
  0% {
    -webkit-clip-path: circle(146px at 128% 123%);
            clip-path: circle(146px at 128% 123%);
  }
  25% {
    -webkit-clip-path: circle(71px at 64% 128%);
            clip-path: circle(71px at 64% 128%);
  }
  50% {
    -webkit-clip-path: circle(63px at -20% -26%);
            clip-path: circle(63px at -20% -26%);
  }
  75% {
    -webkit-clip-path: circle(49px at 82% 107%);
            clip-path: circle(49px at 82% 107%);
  }
  100% {
    -webkit-clip-path: circle(38px at -22% 89%);
            clip-path: circle(38px at -22% 89%);
  }
}
@keyframes clip12 {
  0% {
    -webkit-clip-path: circle(146px at 128% 123%);
            clip-path: circle(146px at 128% 123%);
  }
  25% {
    -webkit-clip-path: circle(71px at 64% 128%);
            clip-path: circle(71px at 64% 128%);
  }
  50% {
    -webkit-clip-path: circle(63px at -20% -26%);
            clip-path: circle(63px at -20% -26%);
  }
  75% {
    -webkit-clip-path: circle(49px at 82% 107%);
            clip-path: circle(49px at 82% 107%);
  }
  100% {
    -webkit-clip-path: circle(38px at -22% 89%);
            clip-path: circle(38px at -22% 89%);
  }
}
#ui .text:nth-child(14) {
  color: #181ae9;
  -webkit-animation: clip13 17926ms ease-in-out infinite alternate;
          animation: clip13 17926ms ease-in-out infinite alternate;
  filter: blur(8px);
}
@-webkit-keyframes clip13 {
  0% {
    -webkit-clip-path: circle(145px at 120% 62%);
            clip-path: circle(145px at 120% 62%);
  }
  25% {
    -webkit-clip-path: circle(173px at 28% 30%);
            clip-path: circle(173px at 28% 30%);
  }
  50% {
    -webkit-clip-path: circle(83px at -3% -15%);
            clip-path: circle(83px at -3% -15%);
  }
  75% {
    -webkit-clip-path: circle(175px at -15% 55%);
            clip-path: circle(175px at -15% 55%);
  }
  100% {
    -webkit-clip-path: circle(154px at 80% 129%);
            clip-path: circle(154px at 80% 129%);
  }
}
@keyframes clip13 {
  0% {
    -webkit-clip-path: circle(145px at 120% 62%);
            clip-path: circle(145px at 120% 62%);
  }
  25% {
    -webkit-clip-path: circle(173px at 28% 30%);
            clip-path: circle(173px at 28% 30%);
  }
  50% {
    -webkit-clip-path: circle(83px at -3% -15%);
            clip-path: circle(83px at -3% -15%);
  }
  75% {
    -webkit-clip-path: circle(175px at -15% 55%);
            clip-path: circle(175px at -15% 55%);
  }
  100% {
    -webkit-clip-path: circle(154px at 80% 129%);
            clip-path: circle(154px at 80% 129%);
  }
}
#ui .text:nth-child(15) {
  color: #0c4d98;
  -webkit-animation: clip14 13166ms ease-in-out infinite alternate;
          animation: clip14 13166ms ease-in-out infinite alternate;
  filter: blur(-7px);
}
@-webkit-keyframes clip14 {
  0% {
    -webkit-clip-path: circle(76px at -21% 111%);
            clip-path: circle(76px at -21% 111%);
  }
  25% {
    -webkit-clip-path: circle(171px at 85% 54%);
            clip-path: circle(171px at 85% 54%);
  }
  50% {
    -webkit-clip-path: circle(34px at 114% -12%);
            clip-path: circle(34px at 114% -12%);
  }
  75% {
    -webkit-clip-path: circle(32px at -17% 58%);
            clip-path: circle(32px at -17% 58%);
  }
  100% {
    -webkit-clip-path: circle(58px at 120% 48%);
            clip-path: circle(58px at 120% 48%);
  }
}
@keyframes clip14 {
  0% {
    -webkit-clip-path: circle(76px at -21% 111%);
            clip-path: circle(76px at -21% 111%);
  }
  25% {
    -webkit-clip-path: circle(171px at 85% 54%);
            clip-path: circle(171px at 85% 54%);
  }
  50% {
    -webkit-clip-path: circle(34px at 114% -12%);
            clip-path: circle(34px at 114% -12%);
  }
  75% {
    -webkit-clip-path: circle(32px at -17% 58%);
            clip-path: circle(32px at -17% 58%);
  }
  100% {
    -webkit-clip-path: circle(58px at 120% 48%);
            clip-path: circle(58px at 120% 48%);
  }
}
#ui .text:nth-child(16) {
  color: #0b11b4;
  -webkit-animation: clip15 16614ms ease-in-out infinite alternate;
          animation: clip15 16614ms ease-in-out infinite alternate;
  filter: blur(3px);
}
@-webkit-keyframes clip15 {
  0% {
    -webkit-clip-path: circle(155px at 94% 130%);
            clip-path: circle(155px at 94% 130%);
  }
  25% {
    -webkit-clip-path: circle(159px at -1% 22%);
            clip-path: circle(159px at -1% 22%);
  }
  50% {
    -webkit-clip-path: circle(36px at 86% 94%);
            clip-path: circle(36px at 86% 94%);
  }
  75% {
    -webkit-clip-path: circle(180px at -23% 79%);
            clip-path: circle(180px at -23% 79%);
  }
  100% {
    -webkit-clip-path: circle(177px at 64% 11%);
            clip-path: circle(177px at 64% 11%);
  }
}
@keyframes clip15 {
  0% {
    -webkit-clip-path: circle(155px at 94% 130%);
            clip-path: circle(155px at 94% 130%);
  }
  25% {
    -webkit-clip-path: circle(159px at -1% 22%);
            clip-path: circle(159px at -1% 22%);
  }
  50% {
    -webkit-clip-path: circle(36px at 86% 94%);
            clip-path: circle(36px at 86% 94%);
  }
  75% {
    -webkit-clip-path: circle(180px at -23% 79%);
            clip-path: circle(180px at -23% 79%);
  }
  100% {
    -webkit-clip-path: circle(177px at 64% 11%);
            clip-path: circle(177px at 64% 11%);
  }
}
#ui .text:nth-child(17) {
  color: #1a5dcd;
  -webkit-animation: clip16 13535ms ease-in-out infinite alternate;
          animation: clip16 13535ms ease-in-out infinite alternate;
  filter: blur(15px);
}
@-webkit-keyframes clip16 {
  0% {
    -webkit-clip-path: circle(143px at 36% 27%);
            clip-path: circle(143px at 36% 27%);
  }
  25% {
    -webkit-clip-path: circle(121px at 31% 120%);
            clip-path: circle(121px at 31% 120%);
  }
  50% {
    -webkit-clip-path: circle(97px at 97% -4%);
            clip-path: circle(97px at 97% -4%);
  }
  75% {
    -webkit-clip-path: circle(170px at 20% 7%);
            clip-path: circle(170px at 20% 7%);
  }
  100% {
    -webkit-clip-path: circle(154px at 117% 51%);
            clip-path: circle(154px at 117% 51%);
  }
}
@keyframes clip16 {
  0% {
    -webkit-clip-path: circle(143px at 36% 27%);
            clip-path: circle(143px at 36% 27%);
  }
  25% {
    -webkit-clip-path: circle(121px at 31% 120%);
            clip-path: circle(121px at 31% 120%);
  }
  50% {
    -webkit-clip-path: circle(97px at 97% -4%);
            clip-path: circle(97px at 97% -4%);
  }
  75% {
    -webkit-clip-path: circle(170px at 20% 7%);
            clip-path: circle(170px at 20% 7%);
  }
  100% {
    -webkit-clip-path: circle(154px at 117% 51%);
            clip-path: circle(154px at 117% 51%);
  }
}
#ui .text:nth-child(18) {
  color: #04059d;
  -webkit-animation: clip17 16951ms ease-in-out infinite alternate;
          animation: clip17 16951ms ease-in-out infinite alternate;
  filter: blur(11px);
}
@-webkit-keyframes clip17 {
  0% {
    -webkit-clip-path: circle(60px at 12% 93%);
            clip-path: circle(60px at 12% 93%);
  }
  25% {
    -webkit-clip-path: circle(46px at 20% -28%);
            clip-path: circle(46px at 20% -28%);
  }
  50% {
    -webkit-clip-path: circle(98px at 45% -2%);
            clip-path: circle(98px at 45% -2%);
  }
  75% {
    -webkit-clip-path: circle(113px at 87% -27%);
            clip-path: circle(113px at 87% -27%);
  }
  100% {
    -webkit-clip-path: circle(74px at 86% -26%);
            clip-path: circle(74px at 86% -26%);
  }
}
@keyframes clip17 {
  0% {
    -webkit-clip-path: circle(60px at 12% 93%);
            clip-path: circle(60px at 12% 93%);
  }
  25% {
    -webkit-clip-path: circle(46px at 20% -28%);
            clip-path: circle(46px at 20% -28%);
  }
  50% {
    -webkit-clip-path: circle(98px at 45% -2%);
            clip-path: circle(98px at 45% -2%);
  }
  75% {
    -webkit-clip-path: circle(113px at 87% -27%);
            clip-path: circle(113px at 87% -27%);
  }
  100% {
    -webkit-clip-path: circle(74px at 86% -26%);
            clip-path: circle(74px at 86% -26%);
  }
}
#ui .text:nth-child(19) {
  color: #1206f7;
  -webkit-animation: clip18 12300ms ease-in-out infinite alternate;
          animation: clip18 12300ms ease-in-out infinite alternate;
  filter: blur(15px);
}
@-webkit-keyframes clip18 {
  0% {
    -webkit-clip-path: circle(117px at 2% 39%);
            clip-path: circle(117px at 2% 39%);
  }
  25% {
    -webkit-clip-path: circle(172px at 78% -9%);
            clip-path: circle(172px at 78% -9%);
  }
  50% {
    -webkit-clip-path: circle(177px at 51% 107%);
            clip-path: circle(177px at 51% 107%);
  }
  75% {
    -webkit-clip-path: circle(74px at 89% 17%);
            clip-path: circle(74px at 89% 17%);
  }
  100% {
    -webkit-clip-path: circle(178px at 113% 47%);
            clip-path: circle(178px at 113% 47%);
  }
}
@keyframes clip18 {
  0% {
    -webkit-clip-path: circle(117px at 2% 39%);
            clip-path: circle(117px at 2% 39%);
  }
  25% {
    -webkit-clip-path: circle(172px at 78% -9%);
            clip-path: circle(172px at 78% -9%);
  }
  50% {
    -webkit-clip-path: circle(177px at 51% 107%);
            clip-path: circle(177px at 51% 107%);
  }
  75% {
    -webkit-clip-path: circle(74px at 89% 17%);
            clip-path: circle(74px at 89% 17%);
  }
  100% {
    -webkit-clip-path: circle(178px at 113% 47%);
            clip-path: circle(178px at 113% 47%);
  }
}
#ui .text:nth-child(20) {
  color: #0a0eaa;
  -webkit-animation: clip19 16391ms ease-in-out infinite alternate;
          animation: clip19 16391ms ease-in-out infinite alternate;
  filter: blur(-4px);
}
@-webkit-keyframes clip19 {
  0% {
    -webkit-clip-path: circle(64px at 47% 34%);
            clip-path: circle(64px at 47% 34%);
  }
  25% {
    -webkit-clip-path: circle(175px at 114% -7%);
            clip-path: circle(175px at 114% -7%);
  }
  50% {
    -webkit-clip-path: circle(40px at -21% 98%);
            clip-path: circle(40px at -21% 98%);
  }
  75% {
    -webkit-clip-path: circle(37px at 30% 10%);
            clip-path: circle(37px at 30% 10%);
  }
  100% {
    -webkit-clip-path: circle(141px at -18% 120%);
            clip-path: circle(141px at -18% 120%);
  }
}
@keyframes clip19 {
  0% {
    -webkit-clip-path: circle(64px at 47% 34%);
            clip-path: circle(64px at 47% 34%);
  }
  25% {
    -webkit-clip-path: circle(175px at 114% -7%);
            clip-path: circle(175px at 114% -7%);
  }
  50% {
    -webkit-clip-path: circle(40px at -21% 98%);
            clip-path: circle(40px at -21% 98%);
  }
  75% {
    -webkit-clip-path: circle(37px at 30% 10%);
            clip-path: circle(37px at 30% 10%);
  }
  100% {
    -webkit-clip-path: circle(141px at -18% 120%);
            clip-path: circle(141px at -18% 120%);
  }
}
#ui .text:nth-child(21) {
  color: #10536d;
  -webkit-animation: clip20 17284ms ease-in-out infinite alternate;
          animation: clip20 17284ms ease-in-out infinite alternate;
  filter: blur(3px);
}
@-webkit-keyframes clip20 {
  0% {
    -webkit-clip-path: circle(117px at 9% 6%);
            clip-path: circle(117px at 9% 6%);
  }
  25% {
    -webkit-clip-path: circle(81px at 48% -1%);
            clip-path: circle(81px at 48% -1%);
  }
  50% {
    -webkit-clip-path: circle(130px at 74% 41%);
            clip-path: circle(130px at 74% 41%);
  }
  75% {
    -webkit-clip-path: circle(115px at 38% 72%);
            clip-path: circle(115px at 38% 72%);
  }
  100% {
    -webkit-clip-path: circle(85px at 35% 125%);
            clip-path: circle(85px at 35% 125%);
  }
}
@keyframes clip20 {
  0% {
    -webkit-clip-path: circle(117px at 9% 6%);
            clip-path: circle(117px at 9% 6%);
  }
  25% {
    -webkit-clip-path: circle(81px at 48% -1%);
            clip-path: circle(81px at 48% -1%);
  }
  50% {
    -webkit-clip-path: circle(130px at 74% 41%);
            clip-path: circle(130px at 74% 41%);
  }
  75% {
    -webkit-clip-path: circle(115px at 38% 72%);
            clip-path: circle(115px at 38% 72%);
  }
  100% {
    -webkit-clip-path: circle(85px at 35% 125%);
            clip-path: circle(85px at 35% 125%);
  }
}
#ui .text:nth-child(22) {
  color: #0b64c0;
  -webkit-animation: clip21 15471ms ease-in-out infinite alternate;
          animation: clip21 15471ms ease-in-out infinite alternate;
  filter: blur(-3px);
}
@-webkit-keyframes clip21 {
  0% {
    -webkit-clip-path: circle(67px at 127% 61%);
            clip-path: circle(67px at 127% 61%);
  }
  25% {
    -webkit-clip-path: circle(107px at 76% 14%);
            clip-path: circle(107px at 76% 14%);
  }
  50% {
    -webkit-clip-path: circle(158px at -7% 81%);
            clip-path: circle(158px at -7% 81%);
  }
  75% {
    -webkit-clip-path: circle(137px at -4% 3%);
            clip-path: circle(137px at -4% 3%);
  }
  100% {
    -webkit-clip-path: circle(119px at 16% 128%);
            clip-path: circle(119px at 16% 128%);
  }
}
@keyframes clip21 {
  0% {
    -webkit-clip-path: circle(67px at 127% 61%);
            clip-path: circle(67px at 127% 61%);
  }
  25% {
    -webkit-clip-path: circle(107px at 76% 14%);
            clip-path: circle(107px at 76% 14%);
  }
  50% {
    -webkit-clip-path: circle(158px at -7% 81%);
            clip-path: circle(158px at -7% 81%);
  }
  75% {
    -webkit-clip-path: circle(137px at -4% 3%);
            clip-path: circle(137px at -4% 3%);
  }
  100% {
    -webkit-clip-path: circle(119px at 16% 128%);
            clip-path: circle(119px at 16% 128%);
  }
}
#ui .text:nth-child(23) {
  color: #1b64d4;
  -webkit-animation: clip22 10361ms ease-in-out infinite alternate;
          animation: clip22 10361ms ease-in-out infinite alternate;
  filter: blur(-6px);
}
@-webkit-keyframes clip22 {
  0% {
    -webkit-clip-path: circle(113px at 81% 91%);
            clip-path: circle(113px at 81% 91%);
  }
  25% {
    -webkit-clip-path: circle(69px at 113% 26%);
            clip-path: circle(69px at 113% 26%);
  }
  50% {
    -webkit-clip-path: circle(159px at 87% 44%);
            clip-path: circle(159px at 87% 44%);
  }
  75% {
    -webkit-clip-path: circle(160px at 26% 82%);
            clip-path: circle(160px at 26% 82%);
  }
  100% {
    -webkit-clip-path: circle(59px at -10% -29%);
            clip-path: circle(59px at -10% -29%);
  }
}
@keyframes clip22 {
  0% {
    -webkit-clip-path: circle(113px at 81% 91%);
            clip-path: circle(113px at 81% 91%);
  }
  25% {
    -webkit-clip-path: circle(69px at 113% 26%);
            clip-path: circle(69px at 113% 26%);
  }
  50% {
    -webkit-clip-path: circle(159px at 87% 44%);
            clip-path: circle(159px at 87% 44%);
  }
  75% {
    -webkit-clip-path: circle(160px at 26% 82%);
            clip-path: circle(160px at 26% 82%);
  }
  100% {
    -webkit-clip-path: circle(59px at -10% -29%);
            clip-path: circle(59px at -10% -29%);
  }
}
#ui .text:nth-child(24) {
  color: #1601bf;
  -webkit-animation: clip23 13402ms ease-in-out infinite alternate;
          animation: clip23 13402ms ease-in-out infinite alternate;
  filter: blur(3px);
}
@-webkit-keyframes clip23 {
  0% {
    -webkit-clip-path: circle(44px at 82% -25%);
            clip-path: circle(44px at 82% -25%);
  }
  25% {
    -webkit-clip-path: circle(91px at 78% 86%);
            clip-path: circle(91px at 78% 86%);
  }
  50% {
    -webkit-clip-path: circle(135px at 0% 11%);
            clip-path: circle(135px at 0% 11%);
  }
  75% {
    -webkit-clip-path: circle(159px at 3% 5%);
            clip-path: circle(159px at 3% 5%);
  }
  100% {
    -webkit-clip-path: circle(54px at 16% 124%);
            clip-path: circle(54px at 16% 124%);
  }
}
@keyframes clip23 {
  0% {
    -webkit-clip-path: circle(44px at 82% -25%);
            clip-path: circle(44px at 82% -25%);
  }
  25% {
    -webkit-clip-path: circle(91px at 78% 86%);
            clip-path: circle(91px at 78% 86%);
  }
  50% {
    -webkit-clip-path: circle(135px at 0% 11%);
            clip-path: circle(135px at 0% 11%);
  }
  75% {
    -webkit-clip-path: circle(159px at 3% 5%);
            clip-path: circle(159px at 3% 5%);
  }
  100% {
    -webkit-clip-path: circle(54px at 16% 124%);
            clip-path: circle(54px at 16% 124%);
  }
}
#ui .text:nth-child(25) {
  color: #0d37bc;
  -webkit-animation: clip24 18011ms ease-in-out infinite alternate;
          animation: clip24 18011ms ease-in-out infinite alternate;
  filter: blur(-3px);
}
@-webkit-keyframes clip24 {
  0% {
    -webkit-clip-path: circle(44px at -11% 36%);
            clip-path: circle(44px at -11% 36%);
  }
  25% {
    -webkit-clip-path: circle(166px at 86% 13%);
            clip-path: circle(166px at 86% 13%);
  }
  50% {
    -webkit-clip-path: circle(70px at 88% 95%);
            clip-path: circle(70px at 88% 95%);
  }
  75% {
    -webkit-clip-path: circle(41px at -22% 63%);
            clip-path: circle(41px at -22% 63%);
  }
  100% {
    -webkit-clip-path: circle(151px at 31% 111%);
            clip-path: circle(151px at 31% 111%);
  }
}
@keyframes clip24 {
  0% {
    -webkit-clip-path: circle(44px at -11% 36%);
            clip-path: circle(44px at -11% 36%);
  }
  25% {
    -webkit-clip-path: circle(166px at 86% 13%);
            clip-path: circle(166px at 86% 13%);
  }
  50% {
    -webkit-clip-path: circle(70px at 88% 95%);
            clip-path: circle(70px at 88% 95%);
  }
  75% {
    -webkit-clip-path: circle(41px at -22% 63%);
            clip-path: circle(41px at -22% 63%);
  }
  100% {
    -webkit-clip-path: circle(151px at 31% 111%);
            clip-path: circle(151px at 31% 111%);
  }
}
#ui .text:nth-child(26) {
  color: #1c57cf;
  -webkit-animation: clip25 10883ms ease-in-out infinite alternate;
          animation: clip25 10883ms ease-in-out infinite alternate;
  filter: blur(-8px);
}
@-webkit-keyframes clip25 {
  0% {
    -webkit-clip-path: circle(80px at 10% 85%);
            clip-path: circle(80px at 10% 85%);
  }
  25% {
    -webkit-clip-path: circle(171px at 12% 98%);
            clip-path: circle(171px at 12% 98%);
  }
  50% {
    -webkit-clip-path: circle(121px at 103% 80%);
            clip-path: circle(121px at 103% 80%);
  }
  75% {
    -webkit-clip-path: circle(66px at 83% 53%);
            clip-path: circle(66px at 83% 53%);
  }
  100% {
    -webkit-clip-path: circle(74px at 118% 64%);
            clip-path: circle(74px at 118% 64%);
  }
}
@keyframes clip25 {
  0% {
    -webkit-clip-path: circle(80px at 10% 85%);
            clip-path: circle(80px at 10% 85%);
  }
  25% {
    -webkit-clip-path: circle(171px at 12% 98%);
            clip-path: circle(171px at 12% 98%);
  }
  50% {
    -webkit-clip-path: circle(121px at 103% 80%);
            clip-path: circle(121px at 103% 80%);
  }
  75% {
    -webkit-clip-path: circle(66px at 83% 53%);
            clip-path: circle(66px at 83% 53%);
  }
  100% {
    -webkit-clip-path: circle(74px at 118% 64%);
            clip-path: circle(74px at 118% 64%);
  }
}
#ui .text:nth-child(27) {
  color: #184cdc;
  -webkit-animation: clip26 18719ms ease-in-out infinite alternate;
          animation: clip26 18719ms ease-in-out infinite alternate;
  filter: blur(5px);
}
@-webkit-keyframes clip26 {
  0% {
    -webkit-clip-path: circle(164px at -24% 53%);
            clip-path: circle(164px at -24% 53%);
  }
  25% {
    -webkit-clip-path: circle(153px at -29% -7%);
            clip-path: circle(153px at -29% -7%);
  }
  50% {
    -webkit-clip-path: circle(115px at 54% 53%);
            clip-path: circle(115px at 54% 53%);
  }
  75% {
    -webkit-clip-path: circle(94px at 61% 76%);
            clip-path: circle(94px at 61% 76%);
  }
  100% {
    -webkit-clip-path: circle(97px at 30% -4%);
            clip-path: circle(97px at 30% -4%);
  }
}
@keyframes clip26 {
  0% {
    -webkit-clip-path: circle(164px at -24% 53%);
            clip-path: circle(164px at -24% 53%);
  }
  25% {
    -webkit-clip-path: circle(153px at -29% -7%);
            clip-path: circle(153px at -29% -7%);
  }
  50% {
    -webkit-clip-path: circle(115px at 54% 53%);
            clip-path: circle(115px at 54% 53%);
  }
  75% {
    -webkit-clip-path: circle(94px at 61% 76%);
            clip-path: circle(94px at 61% 76%);
  }
  100% {
    -webkit-clip-path: circle(97px at 30% -4%);
            clip-path: circle(97px at 30% -4%);
  }
}
#ui .text:nth-child(28) {
  color: #072a97;
  -webkit-animation: clip27 16439ms ease-in-out infinite alternate;
          animation: clip27 16439ms ease-in-out infinite alternate;
  filter: blur(3px);
}
@-webkit-keyframes clip27 {
  0% {
    -webkit-clip-path: circle(162px at 120% 16%);
            clip-path: circle(162px at 120% 16%);
  }
  25% {
    -webkit-clip-path: circle(49px at 107% -4%);
            clip-path: circle(49px at 107% -4%);
  }
  50% {
    -webkit-clip-path: circle(113px at 82% -2%);
            clip-path: circle(113px at 82% -2%);
  }
  75% {
    -webkit-clip-path: circle(122px at -7% -4%);
            clip-path: circle(122px at -7% -4%);
  }
  100% {
    -webkit-clip-path: circle(179px at 76% 65%);
            clip-path: circle(179px at 76% 65%);
  }
}
@keyframes clip27 {
  0% {
    -webkit-clip-path: circle(162px at 120% 16%);
            clip-path: circle(162px at 120% 16%);
  }
  25% {
    -webkit-clip-path: circle(49px at 107% -4%);
            clip-path: circle(49px at 107% -4%);
  }
  50% {
    -webkit-clip-path: circle(113px at 82% -2%);
            clip-path: circle(113px at 82% -2%);
  }
  75% {
    -webkit-clip-path: circle(122px at -7% -4%);
            clip-path: circle(122px at -7% -4%);
  }
  100% {
    -webkit-clip-path: circle(179px at 76% 65%);
            clip-path: circle(179px at 76% 65%);
  }
}
#ui .text:nth-child(29) {
  color: #091bfa;
  -webkit-animation: clip28 14467ms ease-in-out infinite alternate;
          animation: clip28 14467ms ease-in-out infinite alternate;
  filter: blur(-8px);
}
@-webkit-keyframes clip28 {
  0% {
    -webkit-clip-path: circle(148px at -27% 81%);
            clip-path: circle(148px at -27% 81%);
  }
  25% {
    -webkit-clip-path: circle(153px at -29% 112%);
            clip-path: circle(153px at -29% 112%);
  }
  50% {
    -webkit-clip-path: circle(85px at 17% 104%);
            clip-path: circle(85px at 17% 104%);
  }
  75% {
    -webkit-clip-path: circle(107px at -12% 82%);
            clip-path: circle(107px at -12% 82%);
  }
  100% {
    -webkit-clip-path: circle(142px at 74% 53%);
            clip-path: circle(142px at 74% 53%);
  }
}
@keyframes clip28 {
  0% {
    -webkit-clip-path: circle(148px at -27% 81%);
            clip-path: circle(148px at -27% 81%);
  }
  25% {
    -webkit-clip-path: circle(153px at -29% 112%);
            clip-path: circle(153px at -29% 112%);
  }
  50% {
    -webkit-clip-path: circle(85px at 17% 104%);
            clip-path: circle(85px at 17% 104%);
  }
  75% {
    -webkit-clip-path: circle(107px at -12% 82%);
            clip-path: circle(107px at -12% 82%);
  }
  100% {
    -webkit-clip-path: circle(142px at 74% 53%);
            clip-path: circle(142px at 74% 53%);
  }
}
#ui .text:nth-child(30) {
  color: #0c3b80;
  -webkit-animation: clip29 16720ms ease-in-out infinite alternate;
          animation: clip29 16720ms ease-in-out infinite alternate;
  filter: blur(-5px);
}
@-webkit-keyframes clip29 {
  0% {
    -webkit-clip-path: circle(87px at 68% 89%);
            clip-path: circle(87px at 68% 89%);
  }
  25% {
    -webkit-clip-path: circle(106px at 99% 50%);
            clip-path: circle(106px at 99% 50%);
  }
  50% {
    -webkit-clip-path: circle(113px at 76% 42%);
            clip-path: circle(113px at 76% 42%);
  }
  75% {
    -webkit-clip-path: circle(53px at 54% 50%);
            clip-path: circle(53px at 54% 50%);
  }
  100% {
    -webkit-clip-path: circle(166px at 110% -16%);
            clip-path: circle(166px at 110% -16%);
  }
}
@keyframes clip29 {
  0% {
    -webkit-clip-path: circle(87px at 68% 89%);
            clip-path: circle(87px at 68% 89%);
  }
  25% {
    -webkit-clip-path: circle(106px at 99% 50%);
            clip-path: circle(106px at 99% 50%);
  }
  50% {
    -webkit-clip-path: circle(113px at 76% 42%);
            clip-path: circle(113px at 76% 42%);
  }
  75% {
    -webkit-clip-path: circle(53px at 54% 50%);
            clip-path: circle(53px at 54% 50%);
  }
  100% {
    -webkit-clip-path: circle(166px at 110% -16%);
            clip-path: circle(166px at 110% -16%);
  }
}
#ui .text:nth-child(31) {
  color: #035dfa;
  -webkit-animation: clip30 18134ms ease-in-out infinite alternate;
          animation: clip30 18134ms ease-in-out infinite alternate;
  filter: blur(-3px);
}
@-webkit-keyframes clip30 {
  0% {
    -webkit-clip-path: circle(79px at -8% 16%);
            clip-path: circle(79px at -8% 16%);
  }
  25% {
    -webkit-clip-path: circle(165px at 63% 125%);
            clip-path: circle(165px at 63% 125%);
  }
  50% {
    -webkit-clip-path: circle(33px at 126% -14%);
            clip-path: circle(33px at 126% -14%);
  }
  75% {
    -webkit-clip-path: circle(133px at 94% 41%);
            clip-path: circle(133px at 94% 41%);
  }
  100% {
    -webkit-clip-path: circle(134px at 49% 124%);
            clip-path: circle(134px at 49% 124%);
  }
}
@keyframes clip30 {
  0% {
    -webkit-clip-path: circle(79px at -8% 16%);
            clip-path: circle(79px at -8% 16%);
  }
  25% {
    -webkit-clip-path: circle(165px at 63% 125%);
            clip-path: circle(165px at 63% 125%);
  }
  50% {
    -webkit-clip-path: circle(33px at 126% -14%);
            clip-path: circle(33px at 126% -14%);
  }
  75% {
    -webkit-clip-path: circle(133px at 94% 41%);
            clip-path: circle(133px at 94% 41%);
  }
  100% {
    -webkit-clip-path: circle(134px at 49% 124%);
            clip-path: circle(134px at 49% 124%);
  }
}
#ui .text:nth-child(32) {
  color: #0a59b0;
  -webkit-animation: clip31 10268ms ease-in-out infinite alternate;
          animation: clip31 10268ms ease-in-out infinite alternate;
  filter: blur(-5px);
}
@-webkit-keyframes clip31 {
  0% {
    -webkit-clip-path: circle(152px at 70% 50%);
            clip-path: circle(152px at 70% 50%);
  }
  25% {
    -webkit-clip-path: circle(72px at 38% 111%);
            clip-path: circle(72px at 38% 111%);
  }
  50% {
    -webkit-clip-path: circle(81px at 79% 77%);
            clip-path: circle(81px at 79% 77%);
  }
  75% {
    -webkit-clip-path: circle(89px at 47% 113%);
            clip-path: circle(89px at 47% 113%);
  }
  100% {
    -webkit-clip-path: circle(167px at 47% -15%);
            clip-path: circle(167px at 47% -15%);
  }
}
@keyframes clip31 {
  0% {
    -webkit-clip-path: circle(152px at 70% 50%);
            clip-path: circle(152px at 70% 50%);
  }
  25% {
    -webkit-clip-path: circle(72px at 38% 111%);
            clip-path: circle(72px at 38% 111%);
  }
  50% {
    -webkit-clip-path: circle(81px at 79% 77%);
            clip-path: circle(81px at 79% 77%);
  }
  75% {
    -webkit-clip-path: circle(89px at 47% 113%);
            clip-path: circle(89px at 47% 113%);
  }
  100% {
    -webkit-clip-path: circle(167px at 47% -15%);
            clip-path: circle(167px at 47% -15%);
  }
}
#ui .text:nth-child(33) {
  color: #0a35d4;
  -webkit-animation: clip32 10248ms ease-in-out infinite alternate;
          animation: clip32 10248ms ease-in-out infinite alternate;
  filter: blur(-7px);
}
@-webkit-keyframes clip32 {
  0% {
    -webkit-clip-path: circle(66px at 1% 108%);
            clip-path: circle(66px at 1% 108%);
  }
  25% {
    -webkit-clip-path: circle(60px at 9% -17%);
            clip-path: circle(60px at 9% -17%);
  }
  50% {
    -webkit-clip-path: circle(34px at -28% -26%);
            clip-path: circle(34px at -28% -26%);
  }
  75% {
    -webkit-clip-path: circle(51px at 0% -2%);
            clip-path: circle(51px at 0% -2%);
  }
  100% {
    -webkit-clip-path: circle(133px at 72% -23%);
            clip-path: circle(133px at 72% -23%);
  }
}
@keyframes clip32 {
  0% {
    -webkit-clip-path: circle(66px at 1% 108%);
            clip-path: circle(66px at 1% 108%);
  }
  25% {
    -webkit-clip-path: circle(60px at 9% -17%);
            clip-path: circle(60px at 9% -17%);
  }
  50% {
    -webkit-clip-path: circle(34px at -28% -26%);
            clip-path: circle(34px at -28% -26%);
  }
  75% {
    -webkit-clip-path: circle(51px at 0% -2%);
            clip-path: circle(51px at 0% -2%);
  }
  100% {
    -webkit-clip-path: circle(133px at 72% -23%);
            clip-path: circle(133px at 72% -23%);
  }
}
#ui .text:nth-child(34) {
  color: #1a3ffd;
  -webkit-animation: clip33 11611ms ease-in-out infinite alternate;
          animation: clip33 11611ms ease-in-out infinite alternate;
  filter: blur(6px);
}
@-webkit-keyframes clip33 {
  0% {
    -webkit-clip-path: circle(81px at 31% 116%);
            clip-path: circle(81px at 31% 116%);
  }
  25% {
    -webkit-clip-path: circle(59px at 110% 76%);
            clip-path: circle(59px at 110% 76%);
  }
  50% {
    -webkit-clip-path: circle(51px at 42% -10%);
            clip-path: circle(51px at 42% -10%);
  }
  75% {
    -webkit-clip-path: circle(31px at 52% 129%);
            clip-path: circle(31px at 52% 129%);
  }
  100% {
    -webkit-clip-path: circle(145px at 44% 83%);
            clip-path: circle(145px at 44% 83%);
  }
}
@keyframes clip33 {
  0% {
    -webkit-clip-path: circle(81px at 31% 116%);
            clip-path: circle(81px at 31% 116%);
  }
  25% {
    -webkit-clip-path: circle(59px at 110% 76%);
            clip-path: circle(59px at 110% 76%);
  }
  50% {
    -webkit-clip-path: circle(51px at 42% -10%);
            clip-path: circle(51px at 42% -10%);
  }
  75% {
    -webkit-clip-path: circle(31px at 52% 129%);
            clip-path: circle(31px at 52% 129%);
  }
  100% {
    -webkit-clip-path: circle(145px at 44% 83%);
            clip-path: circle(145px at 44% 83%);
  }
}
#ui .text:nth-child(35) {
  color: #0f1a8e;
  -webkit-animation: clip34 19756ms ease-in-out infinite alternate;
          animation: clip34 19756ms ease-in-out infinite alternate;
  filter: blur(1px);
}
@-webkit-keyframes clip34 {
  0% {
    -webkit-clip-path: circle(60px at 71% 1%);
            clip-path: circle(60px at 71% 1%);
  }.........完整代码请登录后点击上方下载按钮下载查看