1 line
3.8 KiB
CSS
1 line
3.8 KiB
CSS
|
.bg-linear-grow{min-height:100vh;overflow-x:hidden;overflow-y:hidden;position:fixed;width:100%}.bg-linear-grow .ball{--delay:0s;--size:0.4;--speed:20s;animation:loop var(--speed) infinite linear;animation-delay:var(--delay);aspect-ratio:1;background:linear-gradient(259.53deg,#0a3fff 6.53%,#f55f0a 95.34%);border-radius:50%;filter:blur(10vw);left:0;opacity:.6;position:absolute;top:0;transform-origin:50% 50%;width:calc(150%*var(--size))}@keyframes loop{0%{transform:translate3D(0,51%,0) rotate(0deg)}5%{transform:translate3D(8%,31%,0) rotate(18deg)}10%{transform:translate3D(22%,13%,0) rotate(36deg)}15%{transform:translate3D(40%,2%,0) rotate(54deg)}20%{transform:translate3D(46%,21%,0) rotate(72deg)}25%{transform:translate3D(50%,47%,0) rotate(90deg)}30%{transform:translate3D(53%,80%,0) rotate(108deg)}35%{transform:translate3D(59%,98%,0) rotate(125deg)}40%{transform:translate3D(84%,89%,0) rotate(144deg)}45%{transform:translate3D(92%,68%,0) rotate(162deg)}50%{transform:translate3D(99%,47%,0) rotate(180deg)}55%{transform:translate3D(97%,21%,0) rotate(198deg)}60%{transform:translate3D(80%,7%,0) rotate(216deg)}65%{transform:translate3D(68%,25%,0) rotate(234deg)}70%{transform:translate3D(59%,41%,0) rotate(251deg)}75%{transform:translate3D(50%,63%,0) rotate(270deg)}80%{transform:translate3D(38%,78%,0) rotate(288deg)}85%{transform:translate3D(21%,92%,0) rotate(306deg)}90%{transform:translate3D(3%,79%,0) rotate(324deg)}to{transform:translate3D(0,51%,0) rotate(1turn)}}.circles{height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.circles li{animation:animate 25s linear infinite;background-color:#ff3cac;background-image:linear-gradient(225deg,#ff3cac,#784ba0 50%,#2b86c5);bottom:-150px;display:block;height:20px;list-style:none;position:absolute;width:20px}.circles li:first-child{animation-delay:0s;height:80px;left:25%;width:80px}.circles li:nth-child(2){animation-delay:2s;animation-duration:12s;height:20px;left:10%;width:20px}.circles li:nth-child(3){animation-delay:4s;height:20px;left:70%;width:20px}.circles li:nth-child(4){animation-delay:0s;animation-duration:18s;height:60px;left:40%;width:60px}.circles li:nth-child(5){animation-delay:0s;height:20px;left:65%;width:20px}.circles li:nth-child(6){animation-delay:3s;height:110px;left:75%;width:110px}.circles li:nth-child(7){animation-delay:7s;height:150px;left:35%;width:150px}.circles li:nth-child(8){animation-delay:15s;animation-duration:45s;height:25px;left:50%;width:25px}.circles li:nth-child(9){animation-delay:2s;animation-duration:35s;height:15px;left:20%;width:15px}.circles li:nth-child(10){animation-delay:0s;animation-duration:11s;height:150px;left:85%;width:150px}@keyframes animate{0%{border-radius:20%;opacity:1;transform:translateY(0) rotate(0deg)}to{border-radius:50%;opacity:0;transform:translateY(-1000px) rotate(2turn)}}.welcome{background-image:linear-gradient(90deg,#80808012 1px,transparent 0),linear-gradient(180deg,#80808012 1px,transparent 0);background-size:50px 50px;height:100%;position:relative}.welcome .slogan{left:10%;min-width:300px;position:absolute;top:50%}.welcome .slogan.fin .path-1,.welcome .slogan.fin .path-2,.welcome .slogan.fin .path-3{stroke-dashoffset:0}.welcome .slogan.fin .path-4{stroke-width:18px}.welcome .slogan .path{fill:none;stroke:var(--color-font);stroke-width:18px;stroke-linecap:round;stroke-linejoin:round}.welcome .slogan .path-1{stroke-dasharray:1850 2000;stroke-dashoffset:1851;transition:5s linear}.welcome .slogan .path-2{stroke-dasharray:260 1000;stroke-dashoffset:261;transition:1.2s linear 5.2s}.welcome .slogan .path-3{stroke-dasharray:100 1000;stroke-dashoffset:101;transition:1s linear 6.5s}.welcome .slogan .path-4{stroke-width:0;transition:.1s linear 7.5s}.welcome .motto{bottom:20px;font-family:motto;font-size:22px;left:50%;position:absolute;transform:translateX(-50%);z-index:1999}
|