div+css实现文字探照灯圣诞快乐动画效果代码
代码语言：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%);
}
25% {
-webkit-clip-path: circle(87px at 57% -24%);
clip-path: circle(87px at 57% -24%);
}
50% {
-webkit-clip-path: circle(34px at -5% 129%);
clip-path: circle(34px at -5% 129%);
}
75% {
-webkit-clip-path: circle(70px at 91% 91%);
clip-path: circle(70px at 91% 91%);
}
100% {
-webkit-clip-path: circle(72px at 9% 37%);
clip-path: circle(72px at 9% 37%);
}
}
@keyframes clip34 {
0% {
-webkit-clip-path: circle(60px at 71% 1%);
clip-path: circle(60px at 71% 1%);
}
25% {
-webkit-clip-path: circle(87px at 57% -24%);
clip-path: circle(87px at 57% -24%);
}
50% {
-webkit-clip-path: circle(34px at -5% 129%);
clip-path: circle(34px at -5% 129%);
}
75% {
-webkit-clip-path: circle(70px at 91% 91%);
clip-path: circle(70px at 91% 91%);
}
100% {
-webkit-clip-path: circle(72px at 9% 37%);
clip-path: circle(72px at 9% 37%);
}
}
#ui .text:nth-child(36) {
color: #12567b;
-webkit-animation: clip35 12196ms ease-in-out infinite alternate;
animation: clip35 12196ms ease-in-out infinite alternate;
filter: blur(-7px);
}
@-webkit-keyframes clip35 {
0% {
-webkit-clip-path: circle(36px at 48% 27%);
clip-path: circle(36px at 48% 27%);
}
25% {
-webkit-clip-path: circle(177px at 83% 6%);
clip-path: circle(177px at 83% 6%);
}
50% {
-webkit-clip-path: circle(136px at 49% -26%);
clip-path: circle(136px at 49% -26%);
}
75% {
-webkit-clip-path: circle(173px at -1% 111%);
clip-path: circle(173px at -1% 111%);
}
100% {
-webkit-clip-path: circle(69px at 61% -6%);
clip-path: circle(69px at 61% -6%);
}
}
@keyframes clip35 {
0% {
-webkit-clip-path: circle(36px at 48% 27%);
clip-path: circle(36px at 48% 27%);
}
25% {
-webkit-clip-path: circle(177px at 83% 6%);
clip-path: circle(177px at 83% 6%);
}
50% {
-webkit-clip-path: circle(136px at 49% -26%);
clip-path: circle(136px at 49% -26%);
}
75% {
-webkit-clip-path: circle(173px at -1% 111%);
clip-path: circle(173px at -1% 111%);
}
100% {
-webkit-clip-path: circle(69px at 61% -6%);
clip-path: circle(69px at 61% -6%);
}
}
#ui .text:nth-child(37) {
color: #022072;
-webkit-animation: clip36 11602ms ease-in-out infinite alternate;
animation: clip36 11602ms ease-in-out infinite alternate;
filter: blur(4px);
}
@-webkit-keyframes clip36 {
0% {
-webkit-clip-path: circle(118px at 103% 74%);
clip-path: circle(118px at 103% 74%);
}
25% {
-webkit-clip-path: circle(100px at -26% 45%);
clip-path: circle(100px at -26% 45%);
}
50% {
-webkit-clip-path: circle(159px at -7% 37%);
clip-path: circle(159px at -7% 37%);
}
75% {
-webkit-clip-path: circle(108px at 96% 36%);
clip-path: circle(108px at 96% 36%);
}
100% {
-webkit-clip-path: circle(50px at 109% 51%);
clip-path: circle(50px at 109% 51%);
}
}
@keyframes clip36 {
0% {
-webkit-clip-path: circle(118px at 103% 74%);
clip-path: circle(118px at 103% 74%);
}
25% {
-webkit-clip-path: circle(100px at -26% 45%);
clip-path: circle(100px at -26% 45%);
}
50% {
-webkit-clip-path: circle(159px at -7% 37%);
clip-path: circle(159px at -7% 37%);
}
75% {
-webkit-clip-path: circle(108px at 96% 36%);
clip-path: circle(108px at 96% 36%);
}
100% {
-webkit-clip-path: circle(50px at 109% 51%);
clip-path: circle(50px at 109% 51%);
}
}
#ui .text:nth-child(38) {
color: #1336ae;
-webkit-animation: clip37 19114ms ease-in-out infinite alternate;
animation: clip37 19114ms ease-in-out infinite alternate;
filter: blur(12px);
}
@-webkit-keyframes clip37 {
0% {
-webkit-clip-path: circle(94px at 115% 89%);
clip-path: circle(94px at 115% 89%);
}
25% {
-webkit-clip-path: circle(160px at 35% 108%);
clip-path: circle(160px at 35% 108%);
}
50% {
-webkit-clip-path: circle(133px at 119% -19%);
clip-path: circle(133px at 119% -19%);
}
75% {
-webkit-clip-path: circle(96px at 84% 129%);
clip-path: circle(96px at 84% 129%);
}
100% {
-webkit-clip-path: circle(180px at 130% 100%);
clip-path: circle(180px at 130% 100%);
}
}
@keyframes clip37 {
0% {
-webkit-clip-path: circle(94px at 115% 89%);
clip-path: circle(94px at 115% 89%);
}
25% {
-webkit-clip-path: circle(160px at 35% 108%);
clip-path: circle(160px at 35% 108%);
}
50% {
-webkit-clip-path: circle(133px at 119% -19%);
clip-path: circle(133px at 119% -19%);
}
75% {
-webkit-clip-path: circle(96px at 84% 129%);
clip-path: circle(96px at 84% 129%);
}
100% {
-webkit-clip-path: circle(180px at 130% 100%);
clip-path: circle(180px at 130% 100%);
}
}
#ui .text:nth-child(39) {
color: #165fdc;
-webkit-animation: clip38 12208ms ease-in-out infinite alternate;
animation: clip38 12208ms ease-in-out infinite alternate;
filter: blur(-4px);
}
@-webkit-keyframes clip38 {
0% {
-webkit-clip-path: circle(119px at 29% 100%);
clip-path: circle(119px at 29% 100%);
}
25% {
-webkit-clip-path: circle(66px at 91% 56%);
clip-path: circle(66px at 91% 56%);
}
50% {
-webkit-clip-path: circle(47px at 63% 7%);
clip-path: circle(47px at 63% 7%);
}
75% {
-webkit-clip-path: circle(80px at 39% 101%);
clip-path: circle(80px at 39% 101%);
}
100% {
-webkit-clip-path: circle(51px at 52% 55%);
clip-path: circle(51px at 52% 55%);
}
}
@keyframes clip38 {
0% {
-webkit-clip-path: circle(119px at 29% 100%);
clip-path: circle(119px at 29% 100%);
}
25% {
-webkit-clip-path: circle(66px at 91% 56%);
clip-path: circle(66px at 91% 56%);
}
50% {
-webkit-clip-path: circle(47px at 63% 7%);
clip-path: circle(47px at 63% 7%);
}
75% {
-webkit-clip-path: circle(80px at 39% 101%);
clip-path: circle(80px at 39% 101%);
}
100% {
-webkit-clip-path: circle(51px at 52% 55%);
clip-path: circle(51px at 52% 55%);
}
}
#ui .text:nth-child(40) {
color: #1b1267;
-webkit-animation: clip39 13503ms ease-in-out infinite alternate;
animation: clip39 13503ms ease-in-out infinite alternate;
filter: blur(4px);
}
@-webkit-keyframes clip39 {
0% {
-webkit-clip-path: circle(163px at 102% -9%);
clip-path: circle(163px at 102% -9%);
}
25% {
-webkit-clip-path: circle(32px at 98% 118%);
clip-path: circle(32px at 98% 118%);
}
50% {
-webkit-clip-path: circle(124px at -14% 128%);
clip-path: circle(124px at -14% 128%);
}
75% {
-webkit-clip-path: circle(52px at 129% 128%);
clip-path: circle(52px at 129% 128%);
}
100% {
-webkit-clip-path: circle(139px at -1% -7%);
clip-path: circle(139px at -1% -7%);
}
}
@keyframes clip39 {
0% {
-webkit-clip-path: circle(163px at 102% -9%);
clip-path: circle(163px at 102% -9%);
}
25% {
-webkit-clip-path: circle(32px at 98% 118%);
clip-path: circle(32px at 98% 118%);
}
50% {
-webkit-clip-path: circle(124px at -14% 128%);
clip-path: circle(124px at -14% 128%);
}
75% {
-webkit-clip-path: circle(52px at 129% 128%);
clip-path: circle(52px at 129% 128%);
}
100% {
-webkit-clip-path: circle(139px at -1% -7%);
clip-path: circle(139px at -1% -7%);
}
}
#ui .text:nth-child(41) {
color: #0921fa;
-webkit-animation: clip40 11128ms ease-in-out infinite alternate;
animation: clip40 11128ms ease-in-out infinite alternate;
filter: blur(-3px);
}
@-webkit-keyframes clip40 {
0% {
-webkit-clip-path: circle(60px at 59% 62%);
clip-path: circle(60px at 59% 62%);
}
25% {
-webkit-clip-path: circle(57px at 33% 111%);
clip-path: circle(57px at 33% 111%);
}
50% {
-webkit-clip-path: circle(140px at 82% -26%);
clip-path: circle(140px at 82% -26%);
}
75% {
-webkit-clip-path: circle(115px at 15% 46%);
clip-path: circle(115px at 15% 46%);
}
100% {
-webkit-clip-path: circle(35px at 78% 67%);
clip-path: circle(35px at 78% 67%);
}
}
@keyframes clip40 {
0% {
-webkit-clip-path: circle(60px at 59% 62%);
clip-path: circle(60px at 59% 62%);
}
25% {
-webkit-clip-path: circle(57px at 33% 111%);
clip-path: circle(57px at 33% 111%);
}
50% {
-webkit-clip-path: circle(140px at 82% -26%);
clip-path: circle(140px at 82% -26%);
}
75% {
-webkit-clip-path: circle(115px at 15% 46%);
clip-path: circle(115px at 15% 46%);
}
100% {
-webkit-clip-path: circle(35px at 78% 67%);
clip-path: circle(35px at 78% 67%);
}
}
#ui .text:nth-child(42) {
color: #1e5079;
-webkit-animation: clip41 13963ms ease-in-out infinite alternate;
animation: clip41 13963ms ease-in-out infinite alternate;
filter: blur(-7px);
}
@-webkit-keyframes clip41 {
0% {
-webkit-clip-path: circle(167px at 66% 84%);
clip-path: circle(167px at 66% 84%);
}
25% {
-webkit-clip-path: circle(64px at 84% 48%);
clip-path: circle(64px at 84% 48%);
}
50% {
-webkit-clip-path: circle(80px at 16% 44%);
clip-path: circle(80px at 16% 44%);
}
75% {
-webkit-clip-path: circle(138px at 9% 71%);
clip-path: circle(138px at 9% 71%);
}
100% {
-webkit-clip-path: circle(63px at -5% -29%);
clip-path: circle(63px at -5% -29%);
}
}
@keyframes clip41 {
0% {
-webkit-clip-path: circle(167px at 66% 84%);
clip-path: circle(167px at 66% 84%);
}
25% {
-webkit-clip-path: circle(64px at 84% 48%);
clip-path: circle(64px at 84% 48%);
}
50% {
-webkit-clip-path: circle(80px at 16% 44%);
clip-path: circle(80px at 16% 44%);
}
75% {
-webkit-clip-path: circle(138px at 9% 71%);
clip-path: circle(138px at 9% 71%);
}
100% {
-webkit-clip-path: circle(63px at -5% -29%);
clip-path: circle(63px at -5% -29%);
}
}
#ui .text:nth-child(43) {
color: #193ade;
-webkit-animation: clip42 16711ms ease-in-out infinite alternate;
animation: clip42 16711ms ease-in-out infinite alternate;
filter: blur(9px);
}
@-webkit-keyframes clip42 {
0% {
-webkit-clip-path: circle(76px at 16% 57%);
clip-path: circle(76px at 16% 57%);
}
25% {
-webkit-clip-path: circle(131px at 31% 114%);
clip-path: circle(131px at 31% 114%);
}
50% {
-webkit-clip-path: circle(55px at 101% 107%);
clip-path: circle(55px at 101% 107%);
}
75% {
-webkit-clip-path: circle(105px at 128% 31%);
clip-path: circle(105px at 128% 31%);
}
100% {
-webkit-clip-path: circle(94px at 16% 31%);
clip-path: circle(94px at 16% 31%);
}
}
@keyframes clip42 {
0% {
-webkit-clip-path: circle(76px at 16% 57%);
clip-path: circle(76px at 16% 57%);
}
25% {
-webkit-clip-path: circle(131px at 31% 114%);
clip-path: circle(131px at 31% 114%);
}
50% {
-webkit-clip-path: circle(55px at 101% 107%);
clip-path: circle(55px at 101% 107%);
}
75% {
-webkit-clip-path: circle(105px at 128% 31%);
clip-path: circle(105px at 128% 31%);
}
100% {
-webkit-clip-path: circle(94px at 16% 31%);
clip-path: circle(94px at 16% 31%);
}
}
#ui .text:nth-child(44) {
color: #1558e4;
-webkit-animation: clip43 12426ms ease-in-out infinite alternate;
animation: clip43 12426ms ease-in-out infinite alternate;
filter: blur(7px);
}
@-webkit-keyframes clip43 {
0% {
-webkit-clip-path: circle(37px at 31% 101%);
clip-path: circle(37px at 31% 101%);
}
25% {
-webkit-clip-path: circle(87px at 124% 44%);
clip-path: circle(87px at 124% 44%);
}
50% {
-webkit-clip-path: circle(177px at 121% 68%);
clip-path: circle(177px at 121% 68%);
}
75% {
-webkit-clip-path: circle(179px at 65% 116%);
clip-path: circle(179px at 65% 116%);
}
100% {
-webkit-clip-path: circle(167px at 80% 7%);
clip-path: circle(167px at 80% 7%);
}
}
@keyframes clip43 {
0% {
-webkit-clip-path: circle(37px at 31% 101%);
clip-path: circle(37px at 31% 101%);
}
25% {
-webkit-clip-path: circle(87px at 124% 44%);
clip-path: circle(87px at 124% 44%);
}
50% {
-webkit-clip-path: circle(177px at 121% 68%);
clip-path: circle(177px at 121% 68%);
}
75% {
-webkit-clip-path: circle(179px at 65% 116%);
clip-path: circle(179px at 65% 116%);
}
100% {
-webkit-clip-path: circle(167px at 80% 7%);
clip-path: circle(167px at 80% 7%);
}
}
#ui .text:nth-child(45) {
color: #0555e9;
-webkit-animation: clip44 14496ms ease-in-out infinite alternate;
animation: clip44 14496ms ease-in-out infinite alternate;
filter: blur(-7px);
}
@-webkit-keyframes clip44 {
0% {
-webkit-clip-path: circle(101px at 15% -21%);
clip-path: circle(101px at 15% -21%);
}
25% {
-webkit-clip-path: circle(58px at 25% 28%);
clip-path: circle(58px at 25% 28%);
}
50% {
-webkit-clip-path: circle(90px at 125% -1%);
clip-path: circle(90px at 125% -1%);
}
75% {
-webkit-clip-path: circle(148px at 8% 119%);
clip-path: circle(148px at 8% 119%);
}
100% {
-webkit-clip-path: circle(176px at 58% 101%);
clip-path: circle(176px at 58% 101%);
}
}
@keyframes clip44 {
0% {
-webkit-clip-path: circle(101px at 15% -21%);
clip-path: circle(101px at 15% -21%);
}
25% {
-webkit-clip-path: circle(58px at 25% 28%);
clip-path: circle(58px at 25% 28%);
}
50% {
-webkit-clip-path: circle(90px at 125% -1%);
clip-path: circle(90px at 125% -1%);
}
75% {
-webkit-clip-path: circle(148px at 8% 119%);
clip-path: circle(148px at 8% 119%);
}
100% {
-webkit-clip-path: circle(176px at 58% 101%);
clip-path: circle(176px at 58% 101%);
}
}
#ui .text:nth-child(46) {
color: #114af3;
-webkit-animation: clip45 16700ms ease-in-out infinite alternate;
animation: clip45 16700ms ease-in-out infinite alternate;
filter: blur(7px);
}
@-webkit-keyframes clip45 {
0% {
-webkit-clip-path: circle(149px at 81% 106%);
clip-path: circle(149px at 81% 106%);
}
25% {
-webkit-clip-path: circle(113px at -17% 21%);
clip-path: circle(113px at -17% 21%);
}
50% {
-webkit-clip-path: circle(47px at -8% 87%);
clip-path: circle(47px at -8% 87%);
}
75% {
-webkit-clip-path: circle(56px at 87% -12%);
clip-path: circle(56px at 87% -12%);
}
100% {
-webkit-clip-path: circle(86px at 109% -26%);
clip-path: circle(86px at 109% -26%);
}
}
@keyframes clip45 {
0% {
-webkit-clip-path: circle(149px at 81% 106%);
clip-path: circle(149px at 81% 106%);
}
25% {
-webkit-clip-path: circle(113px at -17% 21%);
clip-path: circle(113px at -17% 21%);
}
50% {
-webkit-clip-path: circle(47px at -8% 87%);
clip-path: circle(47px at -8% 87%);
}
75% {
-webkit-clip-path: circle(56px at 87% -12%);
clip-path: circle(56px at 87% -12%);
}
100% {
-webkit-clip-path: circle(86px at 109% -26%);
clip-path: circle(86px at 109% -26%);
}
}
#ui .text:nth-child(47) {
color: #1639ba;
-webkit-animation: clip46 17338ms ease-in-out infinite alternate;
animation: clip46 17338ms ease-in-out infinite alternate;
filter: blur(10px);
}
@-webkit-keyframes clip46 {
0% {
-webkit-clip-path: circle(141px at 68% 87%);
clip-path: circle(141px at 68% 87%);
}
25% {
-webkit-clip-path: circle(116px at 124% 81%);
clip-path: circle(116px at 124% 81%);
}
50% {
-webkit-clip-path: circle(95px at 10% 53%);
clip-path: circle(95px at 10% 53%);
}
75% {
-webkit-clip-path: circle(64px at 63% -8%);
clip-path: circle(64px at 63% -8%);
}
100% {
-webkit-clip-path: circle(48px at 58% 22%);
clip-path: circle(48px at 58% 22%);
}
}
@keyframes clip46 {
0% {
-webkit-clip-path: circle(141px at 68% 87%);
clip-path: circle(141px at 68% 87%);
}
25% {
-webkit-clip-path: circle(116px at 124% 81%);
clip-path: circle(116px at 124% 81%);
}
50% {
-webkit-clip-path: circle(95px at 10% 53%);
clip-path: circle(95px at 10% 53%);
}
75% {
-webkit-clip-path: circle(64px at 63% -8%);
clip-path: circle(64px at 63% -8%);
}
100% {
-webkit-clip-path: circle(48px at 58% 22%);
clip-path: circle(48px at 58% 22%);
}
}
#ui .text:nth-child(48) {
color: #1c14a1;
-webkit-animation: clip47 18659ms ease-in-out infinite alternate;
animation: clip47 18659ms ease-in-out infinite alternate;
filter: blur(4px);
}
@-webkit-keyframes clip47 {
0% {
-webkit-clip-path: circle(159px at 14% 34%);
clip-path: circle(159px at 14% 34%);
}
25% {
-webkit-clip-path: circle(55px at 7% 70%);
clip-path: circle(55px at 7% 70%);
}
50% {
-webkit-clip-path: circle(153px at 43% 51%);
clip-path: circle(153px at 43% 51%);
}
75% {
-webkit-clip-path: circle(92px at 85% 115%);
clip-path: circle(92px at 85% 115%);
}
100% {
-webkit-clip-path: circle(106px at 13% 9%);
clip-path: circle(106px at 13% 9%);
}
}
@keyframes clip47 {
0% {
-webkit-clip-path: circle(159px at 14% 34%);
clip-path: circle(159px at 14% 34%);
}
25% {
-webkit-clip-path: circle(55px at 7% 70%);
clip-path: circle(55px at 7% 70%);
}
50% {
-webkit-clip-path: circle(153px at 43% 51%);
clip-path: circle(153px at 43% 51%);
}
75% {
-webkit-clip-path: circle(92px at 85% 115%);
clip-path: circle(92px at 85% 115%);
}
100% {
-webkit-clip-path: circle(106px at 13% 9%);
clip-path: circle(106px at 13% 9%);
}
}
#ui .text:nth-child(49) {
color: #1c03e9;
-webkit-animation: clip48 15643ms ease-in-out infinite alternate;
animation: clip48 15643ms ease-in-out infinite alternate;
filter: blur(-5px);
}
@-webkit-keyframes clip48 {
0% {
-webkit-clip-path: circle(150px at 73% 51%);
clip-path: circle(150px at 73% 51%);
}
25% {
-webkit-clip-path: circle(63px at 96% 28%);
clip-path: circle(63px at 96% 28%);
}
50% {
-webkit-clip-path: circle(166px at 65% 70%);
clip-path: circle(166px at 65% 70%);
}
75% {
-webkit-clip-path: circle(103px at 100% 30%);
clip-path: circle(103px at 100% 30%);
}
100% {
-webkit-clip-path: circle(150px at 67% 58%);
clip-path: circle(150px at 67% 58%);
}
}
@keyframes clip48 {
0% {
-webkit-clip-path: circle(150px at 73% 51%);
clip-path: circle(150px at 73% 51%);
}
25% {
-webkit-clip-path: circle(63px at 96% 28%);
clip-path: circle(63px at 96% 28%);
}
50% {
-webkit-clip-path: circle(166px at 65% 70%);
clip-path: circle(166px at 65% 70%);
}
75% {
-webkit-clip-path: circle(103px at 100% 30%);
clip-path: circle(103px at 100% 30%);
}
100% {
-webkit-clip-path: circle(150px at 67% 58%);
clip-path: circle(150px at 67% 58%);
}
}
#ui .text:nth-child(50) {
color: #1531e5;
-webkit-animation: clip49 17288ms ease-in-out infinite alternate;
animation: clip49 17288ms ease-in-out infinite alternate;
filter: blur(1px);
}
@-webkit-keyframes clip49 {
0% {
-webkit-clip-path: circle(155px at 102% 61%);
clip-path: circle(155px at 102% 61%);
}
25% {
-webkit-clip-path: circle(72px at 105% 110%);
clip-path: circle(72px at 105% 110%);
}
50% {
-webkit-clip-path: circle(141px at 21% 58%);
clip-path: circle(141px at 21% 58%);
}
75% {
-webkit-clip-path: circle(97px at 70% 113%);
clip-path: circle(97px at 70% 113%);
}
100% {
-webkit-clip-path: circle(162px at 37% 36%);
clip-path: circle(162px at 37% 36%);
}
}
@keyframes clip49 {
0% {
-webkit-clip-path: circle(155px at 102% 61%);
clip-path: circle(155px at 102% 61%);
}
25% {
-webkit-clip-path: circle(72px at 105% 110%);
clip-path: circle(72px at 105% 110%);
}
50% {
-webkit-clip-path: circle(141px at 21% 58%);
clip-path: circle(141px at 21% 58%);
}
75% {
-webkit-clip-path: circle(97px at 70% 113%);
clip-path: circle(97px at 70% 113%);
}
100% {
-webkit-clip-path: circle(162px at 37% 36%);
clip-path: circle(162px at 37% 36%);
}
}
#ui .text:nth-child(51) {
color: #03338f;
-webkit-animation: clip50 15470ms ease-in-out infinite alternate;
animation: clip50 15470ms ease-in-out infinite alternate;
filter: blur(-6px);
}
@-webkit-keyframes clip50 {
0% {
-webkit-clip-path: circle(157px at -25% 12%);
clip-path: circle(157px at -25% 12%);
}
25% {
-webkit-clip-path: circle(175px at -15% 60%);
clip-path: circle(175px at -15% 60%);
}
50% {
-webkit-clip-path: circle(35px at 40% -23%);
clip-path: circle(35px at 40% -23%);
}
75% {
-webkit-clip-path: circle(45px at 110% 130%);
clip-path: circle(45px at 110% 130%);
}
100% {
-webkit-clip-path: circle(154px at 20% 17%);
clip-path: circle(154px at 20% 17%);
}
}
@keyframes clip50 {
0% {
-webkit-clip-path: circle(157px at -25% 12%);
clip-path: circle(157px at -25% 12%);
}
25% {
-webkit-clip-path: circle(175px at -15% 60%);
clip-path: circle(175px at -15% 60%);
}
50% {
-webkit-clip-path: circle(35px at 40% -23%);
clip-path: circle(35px at 40% -23%);
}
75% {
-webkit-clip-path: circle(45px at 110% 130%);
clip-path: circle(45px at 110% 130%);
}
100% {
-webkit-clip-path: circle(154px at 20% 17%);
clip-path: circle(154px at 20% 17%);
}
}
#ui .text:nth-child(52) {
color: #033380;
-webkit-animation: clip51 16803ms ease-in-out infinite alternate;
animation: clip51 16803ms ease-in-out infinite alternate;
filter: blur(2px);
}
@-webkit-keyframes clip51 {
0% {
-webkit-clip-path: circle(37px at 103% 71%);
clip-path: circle(37px at 103% 71%);
}
25% {
-webkit-clip-path: circle(163px at 23% 52%);
clip-path: circle(163px at 23% 52%);
}
50% {
-webkit-clip-path: circle(113px at 7% 23%);
clip-path: circle(113px at 7% 23%);
}
75% {
-webkit-clip-path: circle(39px at 20% 21%);
clip-path: circle(39px at 20% 21%);
}
100% {
-webkit-clip-path: circle(44px at -27% -29%);
clip-path: circle(44px at -27% -29%);
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0