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