css实现文字字母拼接动画效果代码-html代码-BFW代码库

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