css实现文字切片散落及合成动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现文字切片散落及合成动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
<style>
body {
background: #140505;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
-webkit-perspective: 800px;
perspective: 800px;
}
#ui .text {
position: absolute;
font-size: 8rem;
color: #fff;
line-height: 8rem;
opacity: 0;
font-family: 'Anton', sans-serif;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
mix-blend-mode: screen;
}
#ui .text:nth-child(1) {
color: #fd3203;
-webkit-clip-path: polygon(0% 0%, 0% 50%, 10% 50%);
clip-path: polygon(0% 0%, 0% 50%, 10% 50%);
-webkit-transform-origin: -23% 9%;
transform-origin: -23% 9%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly1 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
transform: translate(-50%, -50%) rotateX(-130deg) rotateY(-115deg) rotateZ(27deg) translateZ(331px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(2) {
color: #fb3106;
-webkit-clip-path: polygon(0% 0%, 10% 0%, 10% 50%);
clip-path: polygon(0% 0%, 10% 0%, 10% 50%);
-webkit-transform-origin: 18% 37%;
transform-origin: 18% 37%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly2 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
transform: translate(-50%, -50%) rotateX(339deg) rotateY(-417deg) rotateZ(-204deg) translateZ(-1138px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(3) {
color: #f93109;
-webkit-clip-path: polygon(10% 0%, 10% 50%, 20% 50%);
clip-path: polygon(10% 0%, 10% 50%, 20% 50%);
-webkit-transform-origin: 40% -12%;
transform-origin: 40% -12%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly3 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
transform: translate(-50%, -50%) rotateX(-227deg) rotateY(-85deg) rotateZ(-344deg) translateZ(-1310px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(4) {
color: #f7300c;
-webkit-clip-path: polygon(10% 0%, 20% 0%, 20% 50%);
clip-path: polygon(10% 0%, 20% 0%, 20% 50%);
-webkit-transform-origin: 40% -45%;
transform-origin: 40% -45%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly4 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
transform: translate(-50%, -50%) rotateX(132deg) rotateY(-304deg) rotateZ(181deg) translateZ(-1268px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(5) {
color: #f5300f;
-webkit-clip-path: polygon(20% 0%, 20% 50%, 30% 50%);
clip-path: polygon(20% 0%, 20% 50%, 30% 50%);
-webkit-transform-origin: -4% -6%;
transform-origin: -4% -6%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly5 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
transform: translate(-50%, -50%) rotateX(142deg) rotateY(12deg) rotateZ(-111deg) translateZ(-1328px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(6) {
color: #f32f12;
-webkit-clip-path: polygon(20% 0%, 30% 0%, 30% 50%);
clip-path: polygon(20% 0%, 30% 0%, 30% 50%);
-webkit-transform-origin: -28% -40%;
transform-origin: -28% -40%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly6 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
transform: translate(-50%, -50%) rotateX(30deg) rotateY(29deg) rotateZ(134deg) translateZ(-1405px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(7) {
color: #f12f15;
-webkit-clip-path: polygon(30% 0%, 30% 50%, 40% 50%);
clip-path: polygon(30% 0%, 30% 50%, 40% 50%);
-webkit-transform-origin: 78% -7%;
transform-origin: 78% -7%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly7 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
transform: translate(-50%, -50%) rotateX(378deg) rotateY(35deg) rotateZ(94deg) translateZ(-1064px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(8) {
color: #ef2e18;
-webkit-clip-path: polygon(30% 0%, 40% 0%, 40% 50%);
clip-path: polygon(30% 0%, 40% 0%, 40% 50%);
-webkit-transform-origin: 59% 44%;
transform-origin: 59% 44%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly8 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
transform: translate(-50%, -50%) rotateX(-268deg) rotateY(-321deg) rotateZ(379deg) translateZ(-367px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(9) {
color: #ed2e1b;
-webkit-clip-path: polygon(40% 0%, 40% 50%, 50% 50%);
clip-path: polygon(40% 0%, 40% 50%, 50% 50%);
-webkit-transform-origin: 51% 26%;
transform-origin: 51% 26%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly9 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
transform: translate(-50%, -50%) rotateX(-292deg) rotateY(318deg) rotateZ(163deg) translateZ(-198px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(10) {
color: #eb2d1e;
-webkit-clip-path: polygon(40% 0%, 50% 0%, 50% 50%);
clip-path: polygon(40% 0%, 50% 0%, 50% 50%);
-webkit-transform-origin: 25% -2%;
transform-origin: 25% -2%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly10 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
transform: translate(-50%, -50%) rotateX(266deg) rotateY(122deg) rotateZ(372deg) translateZ(-137px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(11) {
color: #e92d21;
-webkit-clip-path: polygon(50% 0%, 50% 50%, 60% 50%);
clip-path: polygon(50% 0%, 50% 50%, 60% 50%);
-webkit-transform-origin: 48% -29%;
transform-origin: 48% -29%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly11 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
transform: translate(-50%, -50%) rotateX(466deg) rotateY(-42deg) rotateZ(-337deg) translateZ(-320px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(12) {
color: #e72c24;
-webkit-clip-path: polygon(50% 0%, 60% 0%, 60% 50%);
clip-path: polygon(50% 0%, 60% 0%, 60% 50%);
-webkit-transform-origin: 6% 18%;
transform-origin: 6% 18%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly12 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
transform: translate(-50%, -50%) rotateX(479deg) rotateY(448deg) rotateZ(-90deg) translateZ(-760px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(13) {
color: #e52c27;
-webkit-clip-path: polygon(60% 0%, 60% 50%, 70% 50%);
clip-path: polygon(60% 0%, 60% 50%, 70% 50%);
-webkit-transform-origin: 101% 6%;
transform-origin: 101% 6%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly13 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
transform: translate(-50%, -50%) rotateX(-225deg) rotateY(484deg) rotateZ(435deg) translateZ(-1589px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(14) {
color: #e32b2a;
-webkit-clip-path: polygon(60% 0%, 70% 0%, 70% 50%);
clip-path: polygon(60% 0%, 70% 0%, 70% 50%);
-webkit-transform-origin: 89% -4%;
transform-origin: 89% -4%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly14 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
transform: translate(-50%, -50%) rotateX(-306deg) rotateY(500deg) rotateZ(307deg) translateZ(-454px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(15) {
color: #e12b2d;
-webkit-clip-path: polygon(70% 0%, 70% 50%, 80% 50%);
clip-path: polygon(70% 0%, 70% 50%, 80% 50%);
-webkit-transform-origin: 52% -17%;
transform-origin: 52% -17%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly15 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
transform: translate(-50%, -50%) rotateX(-7deg) rotateY(-171deg) rotateZ(-89deg) translateZ(245px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(16) {
color: #df2a30;
-webkit-clip-path: polygon(70% 0%, 80% 0%, 80% 50%);
clip-path: polygon(70% 0%, 80% 0%, 80% 50%);
-webkit-transform-origin: 115% 41%;
transform-origin: 115% 41%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly16 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
transform: translate(-50%, -50%) rotateX(-421deg) rotateY(21deg) rotateZ(137deg) translateZ(-1364px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(17) {
color: #dd2a33;
-webkit-clip-path: polygon(80% 0%, 80% 50%, 90% 50%);
clip-path: polygon(80% 0%, 80% 50%, 90% 50%);
-webkit-transform-origin: 111% -37%;
transform-origin: 111% -37%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly17 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
transform: translate(-50%, -50%) rotateX(467deg) rotateY(-172deg) rotateZ(-77deg) translateZ(2px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(18) {
color: #db2936;
-webkit-clip-path: polygon(80% 0%, 90% 0%, 90% 50%);
clip-path: polygon(80% 0%, 90% 0%, 90% 50%);
-webkit-transform-origin: 123% 9%;
transform-origin: 123% 9%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly18 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
transform: translate(-50%, -50%) rotateX(490deg) rotateY(-204deg) rotateZ(-161deg) translateZ(-2034px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(19) {
color: #d92939;
-webkit-clip-path: polygon(90% 0%, 90% 50%, 100% 50%);
clip-path: polygon(90% 0%, 90% 50%, 100% 50%);
-webkit-transform-origin: 90% 48%;
transform-origin: 90% 48%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly19 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
transform: translate(-50%, -50%) rotateX(401deg) rotateY(-31deg) rotateZ(232deg) translateZ(247px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(20) {
color: #d7283c;
-webkit-clip-path: polygon(90% 0%, 100% 0%, 100% 50%);
clip-path: polygon(90% 0%, 100% 0%, 100% 50%);
-webkit-transform-origin: 79% -2%;
transform-origin: 79% -2%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly20 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
transform: translate(-50%, -50%) rotateX(-378deg) rotateY(-210deg) rotateZ(-229deg) translateZ(339px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(21) {
color: #d5283f;
-webkit-clip-path: polygon(0% 50%, 0% 100%, 10% 100%);
clip-path: polygon(0% 50%, 0% 100%, 10% 100%);
-webkit-transform-origin: -4% 73%;
transform-origin: -4% 73%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly21 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
transform: translate(-50%, -50%) rotateX(155deg) rotateY(113deg) rotateZ(287deg) translateZ(-857px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(22) {
color: #d32742;
-webkit-clip-path: polygon(0% 50%, 10% 50%, 10% 100%);
clip-path: polygon(0% 50%, 10% 50%, 10% 100%);
-webkit-transform-origin: 8% 20%;
transform-origin: 8% 20%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly22 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
transform: translate(-50%, -50%) rotateX(33deg) rotateY(458deg) rotateZ(-5deg) translateZ(-419px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(23) {
color: #d12745;
-webkit-clip-path: polygon(10% 50%, 10% 100%, 20% 100%);
clip-path: polygon(10% 50%, 10% 100%, 20% 100%);
-webkit-transform-origin: -16% 1%;
transform-origin: -16% 1%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly23 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
transform: translate(-50%, -50%) rotateX(291deg) rotateY(-371deg) rotateZ(473deg) translateZ(-43px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(24) {
color: #cf2648;
-webkit-clip-path: polygon(10% 50%, 20% 50%, 20% 100%);
clip-path: polygon(10% 50%, 20% 50%, 20% 100%);
-webkit-transform-origin: 52% 75%;
transform-origin: 52% 75%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly24 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
transform: translate(-50%, -50%) rotateX(-297deg) rotateY(43deg) rotateZ(141deg) translateZ(-2279px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(25) {
color: #cd264b;
-webkit-clip-path: polygon(20% 50%, 20% 100%, 30% 100%);
clip-path: polygon(20% 50%, 20% 100%, 30% 100%);
-webkit-transform-origin: 6% 26%;
transform-origin: 6% 26%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly25 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
transform: translate(-50%, -50%) rotateX(233deg) rotateY(-182deg) rotateZ(-368deg) translateZ(88px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(26) {
color: #cb254e;
-webkit-clip-path: polygon(20% 50%, 30% 50%, 30% 100%);
clip-path: polygon(20% 50%, 30% 50%, 30% 100%);
-webkit-transform-origin: -15% 40%;
transform-origin: -15% 40%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly26 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
transform: translate(-50%, -50%) rotateX(500deg) rotateY(50deg) rotateZ(192deg) translateZ(-677px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(27) {
color: #c92551;
-webkit-clip-path: polygon(30% 50%, 30% 100%, 40% 100%);
clip-path: polygon(30% 50%, 30% 100%, 40% 100%);
-webkit-transform-origin: -12% 2%;
transform-origin: -12% 2%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly27 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
transform: translate(-50%, -50%) rotateX(171deg) rotateY(-389deg) rotateZ(489deg) translateZ(-1811px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(28) {
color: #c72454;
-webkit-clip-path: polygon(30% 50%, 40% 50%, 40% 100%);
clip-path: polygon(30% 50%, 40% 50%, 40% 100%);
-webkit-transform-origin: -14% 79%;
transform-origin: -14% 79%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly28 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
transform: translate(-50%, -50%) rotateX(-7deg) rotateY(272deg) rotateZ(-410deg) translateZ(-1229px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(29) {
color: #c52457;
-webkit-clip-path: polygon(40% 50%, 40% 100%, 50% 100%);
clip-path: polygon(40% 50%, 40% 100%, 50% 100%);
-webkit-transform-origin: 89% 54%;
transform-origin: 89% 54%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly29 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
transform: translate(-50%, -50%) rotateX(-76deg) rotateY(117deg) rotateZ(-62deg) translateZ(240px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(30) {
color: #c3235a;
-webkit-clip-path: polygon(40% 50%, 50% 50%, 50% 100%);
clip-path: polygon(40% 50%, 50% 50%, 50% 100%);
-webkit-transform-origin: 50% 66%;
transform-origin: 50% 66%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly30 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
transform: translate(-50%, -50%) rotateX(-294deg) rotateY(454deg) rotateZ(-21deg) translateZ(-2458px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(31) {
color: #c1235d;
-webkit-clip-path: polygon(50% 50%, 50% 100%, 60% 100%);
clip-path: polygon(50% 50%, 50% 100%, 60% 100%);
-webkit-transform-origin: 8% 63%;
transform-origin: 8% 63%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly31 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
transform: translate(-50%, -50%) rotateX(142deg) rotateY(-93deg) rotateZ(-419deg) translateZ(-2040px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(32) {
color: #bf2260;
-webkit-clip-path: polygon(50% 50%, 60% 50%, 60% 100%);
clip-path: polygon(50% 50%, 60% 50%, 60% 100%);
-webkit-transform-origin: 61% 41%;
transform-origin: 61% 41%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly32 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
transform: translate(-50%, -50%) rotateX(299deg) rotateY(183deg) rotateZ(-126deg) translateZ(-9px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(33) {
color: #bd2263;
-webkit-clip-path: polygon(60% 50%, 60% 100%, 70% 100%);
clip-path: polygon(60% 50%, 60% 100%, 70% 100%);
-webkit-transform-origin: 13% 97%;
transform-origin: 13% 97%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly33 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
transform: translate(-50%, -50%) rotateX(235deg) rotateY(172deg) rotateZ(343deg) translateZ(454px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
#ui .text:nth-child(34) {
color: #bb2166;
-webkit-clip-path: polygon(60% 50%, 70% 50%, 70% 100%);
clip-path: polygon(60% 50%, 70% 50%, 70% 100%);
-webkit-transform-origin: 83% 82%;
transform-origin: 83% 82%;
-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;
-webkit-transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
}
@keyframes fly34 {
0% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
}
10% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
transform: translate(-50%, -50%) rotateX(-314deg) rotateY(9deg) rotateZ(488deg) translateZ(-1831px);
}
90% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px);
transform: translate(-50%, -50%) rotate(0deg) r.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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