css实现文字字母拼接动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现文字字母拼接动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
background: #140505;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
perspective: 800px;
}
#ui .text {
position: absolute;
font-size: 8rem;
color: #fff;
line-height: 8rem;
opacity: 0;
font-family: "Anton", sans-serif;
transform: translate(-50%, -50%);
mix-blend-mode: screen;
}
#ui .text:nth-child(1) {
color: #7f878b;
-webkit-clip-path: polygon(0% 0%, 0% 50%, 10% 50%);
clip-path: polygon(0% 0%, 0% 50%, 10% 50%);
transform-origin: 7% -45%;
-webkit-animation: fly1 5000ms 0ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly1 5000ms 0ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly1 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-250deg) rotateY(138deg) rotateZ(148deg) translateZ(-1243px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-250deg) rotateY(138deg) rotateZ(148deg) translateZ(-1243px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly1 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-250deg) rotateY(138deg) rotateZ(148deg) translateZ(-1243px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-250deg) rotateY(138deg) rotateZ(148deg) translateZ(-1243px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(2) {
color: #f1435a;
-webkit-clip-path: polygon(0% 0%, 10% 0%, 10% 50%);
clip-path: polygon(0% 0%, 10% 0%, 10% 50%);
transform-origin: 31% 11%;
-webkit-animation: fly2 5000ms 40ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly2 5000ms 40ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly2 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-117deg) rotateY(-400deg) rotateZ(-402deg) translateZ(-1701px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-117deg) rotateY(-400deg) rotateZ(-402deg) translateZ(-1701px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly2 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-117deg) rotateY(-400deg) rotateZ(-402deg) translateZ(-1701px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-117deg) rotateY(-400deg) rotateZ(-402deg) translateZ(-1701px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(3) {
color: #3fbfc9;
-webkit-clip-path: polygon(10% 0%, 10% 50%, 20% 50%);
clip-path: polygon(10% 0%, 10% 50%, 20% 50%);
transform-origin: 4% 29%;
-webkit-animation: fly3 5000ms 80ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly3 5000ms 80ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly3 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(384deg) rotateY(-173deg) rotateZ(-411deg) translateZ(-299px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(384deg) rotateY(-173deg) rotateZ(-411deg) translateZ(-299px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly3 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(384deg) rotateY(-173deg) rotateZ(-411deg) translateZ(-299px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(384deg) rotateY(-173deg) rotateZ(-411deg) translateZ(-299px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(4) {
color: #66d189;
-webkit-clip-path: polygon(10% 0%, 20% 0%, 20% 50%);
clip-path: polygon(10% 0%, 20% 0%, 20% 50%);
transform-origin: 55% -47%;
-webkit-animation: fly4 5000ms 120ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly4 5000ms 120ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly4 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(434deg) rotateY(-163deg) rotateZ(-217deg) translateZ(269px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(434deg) rotateY(-163deg) rotateZ(-217deg) translateZ(269px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly4 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(434deg) rotateY(-163deg) rotateZ(-217deg) translateZ(269px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(434deg) rotateY(-163deg) rotateZ(-217deg) translateZ(269px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(5) {
color: #90d7fa;
-webkit-clip-path: polygon(20% 0%, 20% 50%, 30% 50%);
clip-path: polygon(20% 0%, 20% 50%, 30% 50%);
transform-origin: 20% -34%;
-webkit-animation: fly5 5000ms 160ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly5 5000ms 160ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly5 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(279deg) rotateY(187deg) rotateZ(171deg) translateZ(78px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(279deg) rotateY(187deg) rotateZ(171deg) translateZ(78px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly5 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(279deg) rotateY(187deg) rotateZ(171deg) translateZ(78px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(279deg) rotateY(187deg) rotateZ(171deg) translateZ(78px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(6) {
color: #9edd71;
-webkit-clip-path: polygon(20% 0%, 30% 0%, 30% 50%);
clip-path: polygon(20% 0%, 30% 0%, 30% 50%);
transform-origin: 64% 29%;
-webkit-animation: fly6 5000ms 200ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly6 5000ms 200ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly6 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(108deg) rotateY(279deg) rotateZ(-249deg) translateZ(-777px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(108deg) rotateY(279deg) rotateZ(-249deg) translateZ(-777px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly6 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(108deg) rotateY(279deg) rotateZ(-249deg) translateZ(-777px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(108deg) rotateY(279deg) rotateZ(-249deg) translateZ(-777px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(7) {
color: #d7e9d8;
-webkit-clip-path: polygon(30% 0%, 30% 50%, 40% 50%);
clip-path: polygon(30% 0%, 30% 50%, 40% 50%);
transform-origin: 14% -36%;
-webkit-animation: fly7 5000ms 240ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly7 5000ms 240ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly7 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(486deg) rotateY(489deg) rotateZ(-415deg) translateZ(-1171px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(486deg) rotateY(489deg) rotateZ(-415deg) translateZ(-1171px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly7 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(486deg) rotateY(489deg) rotateZ(-415deg) translateZ(-1171px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(486deg) rotateY(489deg) rotateZ(-415deg) translateZ(-1171px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(8) {
color: #4b5994;
-webkit-clip-path: polygon(30% 0%, 40% 0%, 40% 50%);
clip-path: polygon(30% 0%, 40% 0%, 40% 50%);
transform-origin: -7% -2%;
-webkit-animation: fly8 5000ms 280ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly8 5000ms 280ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly8 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-316deg) rotateY(445deg) rotateZ(-34deg) translateZ(-1976px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-316deg) rotateY(445deg) rotateZ(-34deg) translateZ(-1976px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly8 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-316deg) rotateY(445deg) rotateZ(-34deg) translateZ(-1976px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-316deg) rotateY(445deg) rotateZ(-34deg) translateZ(-1976px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(9) {
color: #5dd769;
-webkit-clip-path: polygon(40% 0%, 40% 50%, 50% 50%);
clip-path: polygon(40% 0%, 40% 50%, 50% 50%);
transform-origin: 74% -4%;
-webkit-animation: fly9 5000ms 320ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly9 5000ms 320ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly9 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-337deg) rotateY(-222deg) rotateZ(257deg) translateZ(-677px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-337deg) rotateY(-222deg) rotateZ(257deg) translateZ(-677px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly9 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-337deg) rotateY(-222deg) rotateZ(257deg) translateZ(-677px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-337deg) rotateY(-222deg) rotateZ(257deg) translateZ(-677px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(10) {
color: #9d4a7e;
-webkit-clip-path: polygon(40% 0%, 50% 0%, 50% 50%);
clip-path: polygon(40% 0%, 50% 0%, 50% 50%);
transform-origin: 25% 5%;
-webkit-animation: fly10 5000ms 360ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly10 5000ms 360ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly10 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(477deg) rotateY(455deg) rotateZ(124deg) translateZ(-47px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(477deg) rotateY(455deg) rotateZ(124deg) translateZ(-47px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly10 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(477deg) rotateY(455deg) rotateZ(124deg) translateZ(-47px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(477deg) rotateY(455deg) rotateZ(124deg) translateZ(-47px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(11) {
color: #6af19f;
-webkit-clip-path: polygon(50% 0%, 50% 50%, 60% 50%);
clip-path: polygon(50% 0%, 50% 50%, 60% 50%);
transform-origin: 48% 46%;
-webkit-animation: fly11 5000ms 400ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly11 5000ms 400ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly11 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-278deg) rotateY(-450deg) rotateZ(431deg) translateZ(71px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-278deg) rotateY(-450deg) rotateZ(431deg) translateZ(71px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly11 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-278deg) rotateY(-450deg) rotateZ(431deg) translateZ(71px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-278deg) rotateY(-450deg) rotateZ(431deg) translateZ(71px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(12) {
color: #74a970;
-webkit-clip-path: polygon(50% 0%, 60% 0%, 60% 50%);
clip-path: polygon(50% 0%, 60% 0%, 60% 50%);
transform-origin: 33% -12%;
-webkit-animation: fly12 5000ms 440ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly12 5000ms 440ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly12 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-133deg) rotateY(488deg) rotateZ(41deg) translateZ(-1591px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-133deg) rotateY(488deg) rotateZ(41deg) translateZ(-1591px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly12 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-133deg) rotateY(488deg) rotateZ(41deg) translateZ(-1591px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-133deg) rotateY(488deg) rotateZ(41deg) translateZ(-1591px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(13) {
color: #8d75d8;
-webkit-clip-path: polygon(60% 0%, 60% 50%, 70% 50%);
clip-path: polygon(60% 0%, 60% 50%, 70% 50%);
transform-origin: 45% -11%;
-webkit-animation: fly13 5000ms 480ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly13 5000ms 480ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly13 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(310deg) rotateY(209deg) rotateZ(470deg) translateZ(-389px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(310deg) rotateY(209deg) rotateZ(470deg) translateZ(-389px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly13 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(310deg) rotateY(209deg) rotateZ(470deg) translateZ(-389px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(310deg) rotateY(209deg) rotateZ(470deg) translateZ(-389px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(14) {
color: #aeef6a;
-webkit-clip-path: polygon(60% 0%, 70% 0%, 70% 50%);
clip-path: polygon(60% 0%, 70% 0%, 70% 50%);
transform-origin: 57% 5%;
-webkit-animation: fly14 5000ms 520ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly14 5000ms 520ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly14 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-61deg) rotateY(-408deg) rotateZ(117deg) translateZ(-113px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-61deg) rotateY(-408deg) rotateZ(117deg) translateZ(-113px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly14 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-61deg) rotateY(-408deg) rotateZ(117deg) translateZ(-113px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-61deg) rotateY(-408deg) rotateZ(117deg) translateZ(-113px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(15) {
color: #c23d7d;
-webkit-clip-path: polygon(70% 0%, 70% 50%, 80% 50%);
clip-path: polygon(70% 0%, 70% 50%, 80% 50%);
transform-origin: 86% -26%;
-webkit-animation: fly15 5000ms 560ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly15 5000ms 560ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly15 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-154deg) rotateY(-355deg) rotateZ(401deg) translateZ(-2014px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-154deg) rotateY(-355deg) rotateZ(401deg) translateZ(-2014px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly15 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-154deg) rotateY(-355deg) rotateZ(401deg) translateZ(-2014px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-154deg) rotateY(-355deg) rotateZ(401deg) translateZ(-2014px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(16) {
color: #ea7dc9;
-webkit-clip-path: polygon(70% 0%, 80% 0%, 80% 50%);
clip-path: polygon(70% 0%, 80% 0%, 80% 50%);
transform-origin: 29% -17%;
-webkit-animation: fly16 5000ms 600ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly16 5000ms 600ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly16 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-280deg) rotateY(244deg) rotateZ(-136deg) translateZ(-2048px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-280deg) rotateY(244deg) rotateZ(-136deg) translateZ(-2048px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly16 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-280deg) rotateY(244deg) rotateZ(-136deg) translateZ(-2048px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-280deg) rotateY(244deg) rotateZ(-136deg) translateZ(-2048px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(17) {
color: #e5b87f;
-webkit-clip-path: polygon(80% 0%, 80% 50%, 90% 50%);
clip-path: polygon(80% 0%, 80% 50%, 90% 50%);
transform-origin: 123% -6%;
-webkit-animation: fly17 5000ms 640ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly17 5000ms 640ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly17 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(481deg) rotateY(-207deg) rotateZ(223deg) translateZ(-1301px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(481deg) rotateY(-207deg) rotateZ(223deg) translateZ(-1301px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly17 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(481deg) rotateY(-207deg) rotateZ(223deg) translateZ(-1301px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(481deg) rotateY(-207deg) rotateZ(223deg) translateZ(-1301px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(18) {
color: #dca2d7;
-webkit-clip-path: polygon(80% 0%, 90% 0%, 90% 50%);
clip-path: polygon(80% 0%, 90% 0%, 90% 50%);
transform-origin: 122% -5%;
-webkit-animation: fly18 5000ms 680ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly18 5000ms 680ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly18 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(114deg) rotateY(-142deg) rotateZ(-313deg) translateZ(-1077px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(114deg) rotateY(-142deg) rotateZ(-313deg) translateZ(-1077px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly18 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(114deg) rotateY(-142deg) rotateZ(-313deg) translateZ(-1077px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(114deg) rotateY(-142deg) rotateZ(-313deg) translateZ(-1077px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(19) {
color: #535a8c;
-webkit-clip-path: polygon(90% 0%, 90% 50%, 100% 50%);
clip-path: polygon(90% 0%, 90% 50%, 100% 50%);
transform-origin: 51% 9%;
-webkit-animation: fly19 5000ms 720ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly19 5000ms 720ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly19 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-432deg) rotateY(208deg) rotateZ(-461deg) translateZ(-472px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-432deg) rotateY(208deg) rotateZ(-461deg) translateZ(-472px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly19 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-432deg) rotateY(208deg) rotateZ(-461deg) translateZ(-472px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-432deg) rotateY(208deg) rotateZ(-461deg) translateZ(-472px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(20) {
color: #a6c34d;
-webkit-clip-path: polygon(90% 0%, 100% 0%, 100% 50%);
clip-path: polygon(90% 0%, 100% 0%, 100% 50%);
transform-origin: 44% -13%;
-webkit-animation: fly20 5000ms 760ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly20 5000ms 760ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly20 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-325deg) rotateY(-24deg) rotateZ(-50deg) translateZ(-1383px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-325deg) rotateY(-24deg) rotateZ(-50deg) translateZ(-1383px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly20 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-325deg) rotateY(-24deg) rotateZ(-50deg) translateZ(-1383px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-325deg) rotateY(-24deg) rotateZ(-50deg) translateZ(-1383px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(21) {
color: #45cd52;
-webkit-clip-path: polygon(0% 50%, 0% 100%, 10% 100%);
clip-path: polygon(0% 50%, 0% 100%, 10% 100%);
transform-origin: 4% 34%;
-webkit-animation: fly21 5000ms 800ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly21 5000ms 800ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly21 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-78deg) rotateY(-297deg) rotateZ(174deg) translateZ(-1691px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-78deg) rotateY(-297deg) rotateZ(174deg) translateZ(-1691px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly21 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-78deg) rotateY(-297deg) rotateZ(174deg) translateZ(-1691px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-78deg) rotateY(-297deg) rotateZ(174deg) translateZ(-1691px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(22) {
color: #81739f;
-webkit-clip-path: polygon(0% 50%, 10% 50%, 10% 100%);
clip-path: polygon(0% 50%, 10% 50%, 10% 100%);
transform-origin: 44% 59%;
-webkit-animation: fly22 5000ms 840ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly22 5000ms 840ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly22 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-239deg) rotateY(-107deg) rotateZ(161deg) translateZ(81px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-239deg) rotateY(-107deg) rotateZ(161deg) translateZ(81px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly22 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-239deg) rotateY(-107deg) rotateZ(161deg) translateZ(81px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-239deg) rotateY(-107deg) rotateZ(161deg) translateZ(81px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(23) {
color: #51dd74;
-webkit-clip-path: polygon(10% 50%, 10% 100%, 20% 100%);
clip-path: polygon(10% 50%, 10% 100%, 20% 100%);
transform-origin: -29% 45%;
-webkit-animation: fly23 5000ms 880ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly23 5000ms 880ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly23 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(491deg) rotateY(0deg) rotateZ(-479deg) translateZ(-1001px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(491deg) rotateY(0deg) rotateZ(-479deg) translateZ(-1001px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly23 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(491deg) rotateY(0deg) rotateZ(-479deg) translateZ(-1001px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(491deg) rotateY(0deg) rotateZ(-479deg) translateZ(-1001px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(24) {
color: #c79cde;
-webkit-clip-path: polygon(10% 50%, 20% 50%, 20% 100%);
clip-path: polygon(10% 50%, 20% 50%, 20% 100%);
transform-origin: -8% 85%;
-webkit-animation: fly24 5000ms 920ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly24 5000ms 920ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly24 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(158deg) rotateY(309deg) rotateZ(-213deg) translateZ(-1944px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(158deg) rotateY(309deg) rotateZ(-213deg) translateZ(-1944px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly24 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(158deg) rotateY(309deg) rotateZ(-213deg) translateZ(-1944px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(158deg) rotateY(309deg) rotateZ(-213deg) translateZ(-1944px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(25) {
color: #f56fbf;
-webkit-clip-path: polygon(20% 50%, 20% 100%, 30% 100%);
clip-path: polygon(20% 50%, 20% 100%, 30% 100%);
transform-origin: 28% 31%;
-webkit-animation: fly25 5000ms 960ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly25 5000ms 960ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly25 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(63deg) rotateY(244deg) rotateZ(49deg) translateZ(-924px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(63deg) rotateY(244deg) rotateZ(49deg) translateZ(-924px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly25 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(63deg) rotateY(244deg) rotateZ(49deg) translateZ(-924px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(63deg) rotateY(244deg) rotateZ(49deg) translateZ(-924px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(26) {
color: #41defd;
-webkit-clip-path: polygon(20% 50%, 30% 50%, 30% 100%);
clip-path: polygon(20% 50%, 30% 50%, 30% 100%);
transform-origin: 45% 36%;
-webkit-animation: fly26 5000ms 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly26 5000ms 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly26 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(372deg) rotateY(-123deg) rotateZ(209deg) translateZ(-2328px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(372deg) rotateY(-123deg) rotateZ(209deg) translateZ(-2328px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly26 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(372deg) rotateY(-123deg) rotateZ(209deg) translateZ(-2328px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(372deg) rotateY(-123deg) rotateZ(209deg) translateZ(-2328px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(27) {
color: #58b9c4;
-webkit-clip-path: polygon(30% 50%, 30% 100%, 40% 100%);
clip-path: polygon(30% 50%, 30% 100%, 40% 100%);
transform-origin: -5% 55%;
-webkit-animation: fly27 5000ms 1040ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly27 5000ms 1040ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly27 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-185deg) rotateY(469deg) rotateZ(31deg) translateZ(-2316px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-185deg) rotateY(469deg) rotateZ(31deg) translateZ(-2316px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly27 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-185deg) rotateY(469deg) rotateZ(31deg) translateZ(-2316px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-185deg) rotateY(469deg) rotateZ(31deg) translateZ(-2316px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(28) {
color: #d1846e;
-webkit-clip-path: polygon(30% 50%, 40% 50%, 40% 100%);
clip-path: polygon(30% 50%, 40% 50%, 40% 100%);
transform-origin: 25% 30%;
-webkit-animation: fly28 5000ms 1080ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly28 5000ms 1080ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly28 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(213deg) rotateY(437deg) rotateZ(-152deg) translateZ(-148px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(213deg) rotateY(437deg) rotateZ(-152deg) translateZ(-148px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly28 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(213deg) rotateY(437deg) rotateZ(-152deg) translateZ(-148px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(213deg) rotateY(437deg) rotateZ(-152deg) translateZ(-148px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(29) {
color: #7c94ae;
-webkit-clip-path: polygon(40% 50%, 40% 100%, 50% 100%);
clip-path: polygon(40% 50%, 40% 100%, 50% 100%);
transform-origin: 9% 88%;
-webkit-animation: fly29 5000ms 1120ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly29 5000ms 1120ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly29 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-16deg) rotateY(-450deg) rotateZ(499deg) translateZ(183px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-16deg) rotateY(-450deg) rotateZ(499deg) translateZ(183px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly29 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-16deg) rotateY(-450deg) rotateZ(499deg) translateZ(183px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-16deg) rotateY(-450deg) rotateZ(499deg) translateZ(183px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(30) {
color: #c6b6b1;
-webkit-clip-path: polygon(40% 50%, 50% 50%, 50% 100%);
clip-path: polygon(40% 50%, 50% 50%, 50% 100%);
transform-origin: 85% 30%;
-webkit-animation: fly30 5000ms 1160ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly30 5000ms 1160ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly30 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(412deg) rotateY(-496deg) rotateZ(-325deg) translateZ(-1137px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(412deg) rotateY(-496deg) rotateZ(-325deg) translateZ(-1137px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly30 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(412deg) rotateY(-496deg) rotateZ(-325deg) translateZ(-1137px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(412deg) rotateY(-496deg) rotateZ(-325deg) translateZ(-1137px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(31) {
color: #e6a68e;
-webkit-clip-path: polygon(50% 50%, 50% 100%, 60% 100%);
clip-path: polygon(50% 50%, 50% 100%, 60% 100%);
transform-origin: 95% 10%;
-webkit-animation: fly31 5000ms 1200ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly31 5000ms 1200ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly31 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-140deg) rotateY(-283deg) rotateZ(459deg) translateZ(-138px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-140deg) rotateY(-283deg) rotateZ(459deg) translateZ(-138px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly31 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-140deg) rotateY(-283deg) rotateZ(459deg) translateZ(-138px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-140deg) rotateY(-283deg) rotateZ(459deg) translateZ(-138px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(32) {
color: #794bd6;
-webkit-clip-path: polygon(50% 50%, 60% 50%, 60% 100%);
clip-path: polygon(50% 50%, 60% 50%, 60% 100%);
transform-origin: 90% 38%;
-webkit-animation: fly32 5000ms 1240ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly32 5000ms 1240ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly32 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-406deg) rotateY(265deg) rotateZ(264deg) translateZ(-621px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-406deg) rotateY(265deg) rotateZ(264deg) translateZ(-621px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly32 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-406deg) rotateY(265deg) rotateZ(264deg) translateZ(-621px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-406deg) rotateY(265deg) rotateZ(264deg) translateZ(-621px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(33) {
color: #dfba9c;
-webkit-clip-path: polygon(60% 50%, 60% 100%, 70% 100%);
clip-path: polygon(60% 50%, 60% 100%, 70% 100%);
transform-origin: 44% 42%;
-webkit-animation: fly33 5000ms 1280ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly33 5000ms 1280ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly33 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-423deg) rotateY(-112deg) rotateZ(258deg) translateZ(-873px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-423deg) rotateY(-112deg) rotateZ(258deg) translateZ(-873px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly33 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-423deg) rotateY(-112deg) rotateZ(258deg) translateZ(-873px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-423deg) rotateY(-112deg) rotateZ(258deg) translateZ(-873px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(34) {
color: #639d50;
-webkit-clip-path: polygon(60% 50%, 70% 50%, 70% 100%);
clip-path: polygon(60% 50%, 70% 50%, 70% 100%);
transform-origin: 76% 74%;
-webkit-animation: fly34 5000ms 1320ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly34 5000ms 1320ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly34 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(469deg) rotateY(0deg) rotateZ(152deg) translateZ(336px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(469deg) rotateY(0deg) rotateZ(152deg) translateZ(336px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly34 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(469deg) rotateY(0deg) rotateZ(152deg) translateZ(336px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(469deg) rotateY(0deg) rotateZ(152deg) translateZ(336px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(35) {
color: #deac72;
-webkit-clip-path: polygon(70% 50%, 70% 100%, 80% 100%);
clip-path: polygon(70% 50%, 70% 100%, 80% 100%);
transform-origin: 45% 36%;
-webkit-animation: fly35 5000ms 1360ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly35 5000ms 1360ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly35 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(367deg) rotateY(-431deg) rotateZ(13deg) translateZ(-92px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(367deg) rotateY(-431deg) rotateZ(13deg) translateZ(-92px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly35 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(367deg) rotateY(-431deg) rotateZ(13deg) translateZ(-92px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(367deg) rotateY(-431deg) rotateZ(13deg) translateZ(-92px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(36) {
color: #5243df;
-webkit-clip-path: polygon(70% 50%, 80% 50%, 80% 100%);
clip-path: polygon(70% 50%, 80% 50%, 80% 100%);
transform-origin: 38% 67%;
-webkit-animation: fly36 5000ms 1400ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly36 5000ms 1400ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly36 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-492deg) rotateY(-365deg) rotateZ(-327deg) translateZ(-1720px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-492deg) rotateY(-365deg) rotateZ(-327deg) translateZ(-1720px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly36 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-492deg) rotateY(-365deg) rotateZ(-327deg) translateZ(-1720px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-492deg) rotateY(-365deg) rotateZ(-327deg) translateZ(-1720px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(37) {
color: #849687;
-webkit-clip-path: polygon(80% 50%, 80% 100%, 90% 100%);
clip-path: polygon(80% 50%, 80% 100%, 90% 100%);
transform-origin: 47% 87%;
-webkit-animation: fly37 5000ms 1440ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly37 5000ms 1440ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly37 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(331deg) rotateY(262deg) rotateZ(-120deg) translateZ(-1722px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(331deg) rotateY(262deg) rotateZ(-120deg) translateZ(-1722px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly37 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(331deg) rotateY(262deg) rotateZ(-120deg) translateZ(-1722px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(331deg) rotateY(262deg) rotateZ(-120deg) translateZ(-1722px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(38) {
color: #759b5e;
-webkit-clip-path: polygon(80% 50%, 90% 50%, 90% 100%);
clip-path: polygon(80% 50%, 90% 50%, 90% 100%);
transform-origin: 84% 5%;
-webkit-animation: fly38 5000ms 1480ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly38 5000ms 1480ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly38 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-48deg) rotateY(299deg) rotateZ(215deg) translateZ(-1329px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-48deg) rotateY(299deg) rotateZ(215deg) translateZ(-1329px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly38 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-48deg) rotateY(299deg) rotateZ(215deg) translateZ(-1329px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-48deg) rotateY(299deg) rotateZ(215deg) translateZ(-1329px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(39) {
color: #a55746;
-webkit-clip-path: polygon(90% 50%, 90% 100%, 100% 100%);
clip-path: polygon(90% 50%, 90% 100%, 100% 100%);
transform-origin: 135% 76%;
-webkit-animation: fly39 5000ms 1520ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly39 5000ms 1520ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly39 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(64deg) rotateY(-251deg) rotateZ(155deg) translateZ(481px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(64deg) rotateY(-251deg) rotateZ(155deg) translateZ(481px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly39 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(64deg) rotateY(-251deg) rotateZ(155deg) translateZ(481px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(64deg) rotateY(-251deg) rotateZ(155deg) translateZ(481px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(40) {
color: #6f6ce1;
-webkit-clip-path: polygon(90% 50%, 100% 50%, 100% 100%);
clip-path: polygon(90% 50%, 100% 50%, 100% 100%);
transform-origin: 125% 51%;
-webkit-animation: fly40 5000ms 1560ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly40 5000ms 1560ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly40 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-488deg) rotateY(-302deg) rotateZ(397deg) translateZ(-1989px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-488deg) rotateY(-302deg) rotateZ(397deg) translateZ(-1989px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly40 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-488deg) rotateY(-302deg) rotateZ(397deg) translateZ(-1989px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-488deg) rotateY(-302deg) rotateZ(397deg) translateZ(-1989px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(41) {
color: #c16489;
-webkit-clip-path: polygon(0% 100%, 0% 150%, 10% 150%);
clip-path: polygon(0% 100%, 0% 150%, 10% 150%);
transform-origin: 27% 144%;
-webkit-animation: fly41 5000ms 1600ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly41 5000ms 1600ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly41 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-366deg) rotateY(344deg) rotateZ(356deg) translateZ(-1351px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-366deg) rotateY(344deg) rotateZ(356deg) translateZ(-1351px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly41 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-366deg) rotateY(344deg) rotateZ(356deg) translateZ(-1351px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-366deg) rotateY(344deg) rotateZ(356deg) translateZ(-1351px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(42) {
color: #60e257;
-webkit-clip-path: polygon(0% 100%, 10% 100%, 10% 150%);
clip-path: polygon(0% 100%, 10% 100%, 10% 150%);
transform-origin: -18% 79%;
-webkit-animation: fly42 5000ms 1640ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly42 5000ms 1640ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly42 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-373deg) rotateY(-297deg) rotateZ(133deg) translateZ(-910px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-373deg) rotateY(-297deg) rotateZ(133deg) translateZ(-910px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly42 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-373deg) rotateY(-297deg) rotateZ(133deg) translateZ(-910px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-373deg) rotateY(-297deg) rotateZ(133deg) translateZ(-910px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(43) {
color: #8a50fd;
-webkit-clip-path: polygon(10% 100%, 10% 150%, 20% 150%);
clip-path: polygon(10% 100%, 10% 150%, 20% 150%);
transform-origin: 6% 98%;
-webkit-animation: fly43 5000ms 1680ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly43 5000ms 1680ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly43 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-250deg) rotateY(80deg) rotateZ(326deg) translateZ(49px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-250deg) rotateY(80deg) rotateZ(326deg) translateZ(49px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly43 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-250deg) rotateY(80deg) rotateZ(326deg) translateZ(49px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-250deg) rotateY(80deg) rotateZ(326deg) translateZ(49px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(44) {
color: #50415a;
-webkit-clip-path: polygon(10% 100%, 20% 100%, 20% 150%);
clip-path: polygon(10% 100%, 20% 100%, 20% 150%);
transform-origin: 46% 114%;
-webkit-animation: fly44 5000ms 1720ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly44 5000ms 1720ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly44 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-151deg) rotateY(112deg) rotateZ(340deg) translateZ(-2145px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-151deg) rotateY(112deg) rotateZ(340deg) translateZ(-2145px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly44 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-151deg) rotateY(112deg) rotateZ(340deg) translateZ(-2145px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-151deg) rotateY(112deg) rotateZ(340deg) translateZ(-2145px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(45) {
color: #ea61c8;
-webkit-clip-path: polygon(20% 100%, 20% 150%, 30% 150%);
clip-path: polygon(20% 100%, 20% 150%, 30% 150%);
transform-origin: -26% 105%;
-webkit-animation: fly45 5000ms 1760ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly45 5000ms 1760ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly45 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(328deg) rotateY(271deg) rotateZ(75deg) translateZ(-1195px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(328deg) rotateY(271deg) rotateZ(75deg) translateZ(-1195px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly45 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(328deg) rotateY(271deg) rotateZ(75deg) translateZ(-1195px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(328deg) rotateY(271deg) rotateZ(75deg) translateZ(-1195px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(46) {
color: #f17460;
-webkit-clip-path: polygon(20% 100%, 30% 100%, 30% 150%);
clip-path: polygon(20% 100%, 30% 100%, 30% 150%);
transform-origin: 56% 94%;
-webkit-animation: fly46 5000ms 1800ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly46 5000ms 1800ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly46 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-101deg) rotateY(-378deg) rotateZ(62deg) translateZ(-2192px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-101deg) rotateY(-378deg) rotateZ(62deg) translateZ(-2192px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly46 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-101deg) rotateY(-378deg) rotateZ(62deg) translateZ(-2192px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-101deg) rotateY(-378deg) rotateZ(62deg) translateZ(-2192px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(47) {
color: #cba083;
-webkit-clip-path: polygon(30% 100%, 30% 150%, 40% 150%);
clip-path: polygon(30% 100%, 30% 150%, 40% 150%);
transform-origin: 54% 62%;
-webkit-animation: fly47 5000ms 1840ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly47 5000ms 1840ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly47 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(158deg) rotateY(-467deg) rotateZ(461deg) translateZ(-1464px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(158deg) rotateY(-467deg) rotateZ(461deg) translateZ(-1464px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly47 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(158deg) rotateY(-467deg) rotateZ(461deg) translateZ(-1464px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(158deg) rotateY(-467deg) rotateZ(461deg) translateZ(-1464px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(48) {
color: #ed598d;
-webkit-clip-path: polygon(30% 100%, 40% 100%, 40% 150%);
clip-path: polygon(30% 100%, 40% 100%, 40% 150%);
transform-origin: 68% 140%;
-webkit-animation: fly48 5000ms 1880ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly48 5000ms 1880ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly48 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-452deg) rotateY(-199deg) rotateZ(436deg) translateZ(-1390px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-452deg) rotateY(-199deg) rotateZ(436deg) translateZ(-1390px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly48 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-452deg) rotateY(-199deg) rotateZ(436deg) translateZ(-1390px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-452deg) rotateY(-199deg) rotateZ(436deg) translateZ(-1390px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(49) {
color: #b0b889;
-webkit-clip-path: polygon(40% 100%, 40% 150%, 50% 150%);
clip-path: polygon(40% 100%, 40% 150%, 50% 150%);
transform-origin: -2% 61%;
-webkit-animation: fly49 5000ms 1920ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly49 5000ms 1920ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly49 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(307deg) rotateY(91deg) rotateZ(-423deg) translateZ(-2106px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(307deg) rotateY(91deg) rotateZ(-423deg) translateZ(-2106px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly49 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(307deg) rotateY(91deg) rotateZ(-423deg) translateZ(-2106px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(307deg) rotateY(91deg) rotateZ(-423deg) translateZ(-2106px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(50) {
color: #e8e2d6;
-webkit-clip-path: polygon(40% 100%, 50% 100%, 50% 150%);
clip-path: polygon(40% 100%, 50% 100%, 50% 150%);
transform-origin: 30% 135%;
-webkit-animation: fly50 5000ms 1960ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly50 5000ms 1960ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly50 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(324deg) rotateY(405deg) rotateZ(-393deg) translateZ(-166px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(324deg) rotateY(405deg) rotateZ(-393deg) translateZ(-166px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly50 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(324deg) rotateY(405deg) rotateZ(-393deg) translateZ(-166px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(324deg) rotateY(405deg) rotateZ(-393deg) translateZ(-166px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(51) {
color: #50deaa;
-webkit-clip-path: polygon(50% 100%, 50% 150%, 60% 150%);
clip-path: polygon(50% 100%, 50% 150%, 60% 150%);
transform-origin: 31% 103%;
-webkit-animation: fly51 5000ms 2000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly51 5000ms 2000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly51 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-110deg) rotateY(365deg) rotateZ(-256deg) translateZ(400px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-110deg) rotateY(365deg) rotateZ(-256deg) translateZ(400px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly51 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-110deg) rotateY(365deg) rotateZ(-256deg) translateZ(400px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-110deg) rotateY(365deg) rotateZ(-256deg) translateZ(400px);
}
90% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(52) {
color: #556d4d;
-webkit-clip-path: polygon(50% 100%, 60% 100%, 60% 150%);
clip-path: polygon(50% 100%, 60% 100%, 60% 150%);
transform-origin: 39% 54%;
-webkit-animation: fly52 5000ms 2040ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
animation: fly52 5000ms 2040ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
@-webkit-keyframes fly52 {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-36deg) rotateY(-160deg) rotateZ(327deg) translateZ(-877px);
}
10% {
opacity: 0;
transform: translate(-50%, -50%) rotateX(-36deg) rotateY(-16.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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