Team:CIEI-BJ/css/covercss

body {

 position: relative;
 background-color: #141414;
 background-image: url("");
 font-family: "Kreon", serif;
 height: 100vh;
 width: 100vw;
 display: flex;
 justify-content: center;
 align-items: center;

}

.line {

 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: 25px;
 transform: translate(-50%, -50%);
 width: 0px;
 height: 15px;
 background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
 z-index: -1;
 animation: grow 1.5s ease forwards 1;
 animation-delay: 0.5s;

} @keyframes grow {

 100% {
   width: 400px;
 }

} span {

 position: relative;

}

span:nth-child(1):after {

 position: relative;
 display: inline-block;
 content: "W";
 transform: translateX(-5px) translateY(-77px);
 animation: move 1s ease forwards 1;
 animation-delay: 70ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(2):after {

 position: relative;
 display: inline-block;
 content: "E";
 transform: translateX(-44px) translateY(-40px);
 animation: move 1s ease forwards 1;
 animation-delay: 140ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(3):after {

 position: relative;
 display: inline-block;
 content: ",";
 transform: translateX(-34px) translateY(-52px);
 animation: move 1s ease forwards 1;
 animation-delay: 210ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(4):after {

 position: relative;
 display: inline-block;
 content: "C";
 transform: translateX(-22px) translateY(-38px);
 animation: move 1s ease forwards 1;
 animation-delay: 280ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(5):after {

 position: relative;
 display: inline-block;
 content: "I";
 transform: translateX(-48px) translateY(-20px);
 animation: move 1s ease forwards 1;
 animation-delay: 350ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(6):after {

 position: relative;
 display: inline-block;
 content: "E";
 transform: translateX(-20px) translateY(-70px);
 animation: move 1s ease forwards 1;
 animation-delay: 420ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(7):after {

 position: relative;
 display: inline-block;
 content: "I";
 transform: translateX(-40px) translateY(-12px);
 animation: move 1s ease forwards 1;
 animation-delay: 490ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(8):after {

 position: relative;
 display: inline-block;
 content: "-";
 transform: translateX(-55px) translateY(-63px);
 animation: move 1s ease forwards 1;
 animation-delay: 560ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(9):after {

 position: relative;
 display: inline-block;
 content: "B";
 transform: translateX(-3px) translateY(-5px);
 animation: move 1s ease forwards 1;
 animation-delay: 630ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(10):after {

 position: relative;
 display: inline-block;
 content: "J";
 transform: translateX(-40px) translateY(-26px);
 animation: move 1s ease forwards 1;
 animation-delay: 700ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(11):after {

 position: relative;
 display: inline-block;
 transform: translateX(-15px) translateY(-55px);
 animation: move 1s ease forwards 1;
 animation-delay: 770ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(12):after {

 position: relative;
 display: inline-block;
 transform: translateX(-77px) translateY(-1px);
 animation: move 1s ease forwards 1;
 animation-delay: 840ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(13):after {

 position: relative;
 display: inline-block;
 transform: translateX(-53px) translateY(-18px);
 animation: move 1s ease forwards 1;
 animation-delay: 910ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(14):after {

 position: relative;
 display: inline-block;
 transform: translateX(-48px) translateY(-38px);
 animation: move 1s ease forwards 1;
 animation-delay: 980ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(15):after {

 position: relative;
 display: inline-block;
 transform: translateX(-56px) translateY(-59px);
 animation: move 1s ease forwards 1;
 animation-delay: 1050ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(16):after {

 position: relative;
 display: inline-block;
 transform: translateX(-20px) translateY(-54px);
 animation: move 1s ease forwards 1;
 animation-delay: 1120ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(17):after {

 position: relative;
 display: inline-block;
 transform: translateX(-47px) translateY(-9px);
 animation: move 1s ease forwards 1;
 animation-delay: 1190ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(18):after {

 position: relative;
 display: inline-block;
 transform: translateX(-65px) translateY(-17px);
 animation: move 1s ease forwards 1;
 animation-delay: 1260ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(19):after {

 position: relative;
 display: inline-block;
 transform: translateX(-76px) translateY(-33px);
 animation: move 1s ease forwards 1;
 animation-delay: 1330ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(20):after {

 position: relative;
 display: inline-block;
 transform: translateX(-49px) translateY(0px);
 animation: move 1s ease forwards 1;
 animation-delay: 1400ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(21):after {

 position: relative;
 display: inline-block;
 transform: translateX(-26px) translateY(-78px);
 animation: move 1s ease forwards 1;
 animation-delay: 1470ms;
 top: 0px;
 left: 0px;
 opacity: 0;

} @keyframes move {

 100% {
   opacity: 1;
   transform: translateX(0px) translateY(0px);
 }

} span:nth-child(1):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(2):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(3):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(4):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(5):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(6):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(7):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(8):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(9):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(10):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(11):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(12):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(13):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(14):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(15):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(16):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(17):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(18):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(19):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(20):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

span:nth-child(21):hover {

 transition: 1s;
 display: inline-block;
 cursor: pointer;

}

.child {

 position: absolute;
 border-bottom-left-radius: 50px;
 border-bottom-right-radius: 50px;
 width: 15px;
 opacity: 0;
 z-index: -1;

}

.child:nth-child(1) {

 height: 0px;
 background: #D9EF70;
 animation: extend1 1s ease forwards 1;
 animation-delay: 2s;

} @keyframes extend1 {

 100% {
   height: 100px;
   opacity: 1;
 }

} .child:nth-child(2) {

 height: 0px;
 background: #6DC4CA;
 left: 175px;
 animation-delay: 1.5s;
 animation: extend2 1s ease forwards 1;
 animation-delay: 1.7s;

} @keyframes extend2 {

 100% {
   height: 60px;
   opacity: 1;
 }

} .child:nth-child(3) {

 height: 0px;
 background: #E56A67;
 right: 0px;
 animation-delay: 1.3s;
 animation: extend3 1s ease forwards 1;
 animation-delay: 1.7s;

} @keyframes extend3 {

 100% {
   height: 60px;
   opacity: 1;
 }

} .child:nth-child(4) {

 height: 0px;
 background: #9adca5;
 left: 70px;
 animation-delay: 1s;
 animation: extend4 1s ease forwards 1;
 animation-delay: 1.9s;

} @keyframes extend4 {

 100% {
   height: 80px;
   opacity: 1;
 }

}