B
e
s
t
j
Q
u
e
r
y
.demo{ background-color: #60a3bc; }
.text-effect{
color:#3c6382;
font-family: "Paytone One", sans-serif;
text-align: center;
text-transform: uppercase;
}
.text-effect span{
font-size: 100px;
font-weight: 700;
display: inline-block;
position: relative;
}
.text-effect span:before{
content: attr(data-content);
color: #0a3d62;
width:100%;
position: absolute;
top: 0;
left: 0;
}
.text-effect span:nth-child(1):before{ animation: animate 5s infinite alternate 0s; }
.text-effect span:nth-child(2):before{ animation: animate 5s infinite alternate 0.2s; }
.text-effect span:nth-child(3):before{ animation: animate 5s infinite alternate 0.4s; }
.text-effect span:nth-child(4):before{ animation: animate 5s infinite alternate 0.6s; }
.text-effect span:nth-child(5):before{ animation: animate 5s infinite alternate 0.8s; }
.text-effect span:nth-child(6):before{ animation: animate 5s infinite alternate 1s; }
.text-effect span:nth-child(7):before{ animation: animate 5s infinite alternate 1.2s; }
.text-effect span:nth-child(8):before{ animation: animate 5s infinite alternate 1.4s; }
.text-effect span:nth-child(9):before{ animation: animate 5s infinite alternate 1.6s; }
.text-effect span:nth-child(10):before{ animation: animate 5s infinite alternate 1.8s; }
@keyframes animate{
0%, 10%, 90%, 100% {
transform: rotateY(-90deg);
opacity: 0;
}
15% { opacity: .5; }
20%, 75%{
transform: rotateY(0);
opacity: 1;
}
}
@media only screen and (max-width: 990px){
.text-effect span{ font-size: 90px; }
}
@media only screen and (max-width: 767px){
.text-effect span{ font-size: 70px; }
}
@media only screen and (max-width: 576px){
.text-effect span{ font-size: 50px; }
}
@media only screen and (max-width: 479px){
.text-effect{
font-size: 40px;
line-height: 50px;
}
}