<div class="text-effect">
<span>W</span>
<span>e</span>
<span>b</span>
<span>D</span>
<span>e</span>
<span>s</span>
<span>i</span>
<span>g</span>
<span>n</span>
<span>e</span>
<span>r</span>
</div>
.demo{ background-color: #ccd0d4; }
.text-effect{
font-family: 'Nunito', sans-serif;
text-align: center;
text-transform: uppercase;
margin: 0 auto;
}
.text-effect span{
color: transparent;
font-size: 100px;
text-shadow: 0 0 2px rgba(204,208,212,0.9),0 15px 25px rgba(0,0,0,0.3),
0 -2px 3px rgba(0,0,0,0.1), 0 -5px 10px rgba(255,255,255,0.5),
0 5px 10px rgba(0,0,0,0.3), 0 3px 4px rgba(255,255,255,0.2),
0 0 20px rgba(255,255,255,0.45);
display: inline-block;
animation: animate 0.85s ease-in-out infinite alternate;
}
.text-effect span:nth-child(1){ animation-delay: 0s; }
.text-effect span:nth-child(2){ animation-delay: 0.15s; }
.text-effect span:nth-child(3){ animation-delay: 0.30s; }
.text-effect span:nth-child(4){ animation-delay: 0.45s; }
.text-effect span:nth-child(5){ animation-delay: 0.60s; }
.text-effect span:nth-child(6){ animation-delay: 0.75s; }
.text-effect span:nth-child(7){ animation-delay: 0.90s; }
.text-effect span:nth-child(8){ animation-delay: 1.05s; }
.text-effect span:nth-child(9){ animation-delay: 1.20s; }
.text-effect span:nth-child(10){ animation-delay: 1.35s; }
@keyframes animate{
to{ text-shadow: 0 0 2px rgba(204, 208, 212,0.2),
0 0 3px rgba(0, 0, 0, 0.02),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(255, 255, 255, 0),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(255, 255, 255, 0),
0 0 0 rgba(255, 255, 255, 0);
}
}
@media only screen and (max-width: 990px){
.text-effect span{ font-size: 65px; }
}
@media only screen and (max-width: 767px){
.text-effect span{ font-size: 50px; }
}
@media only screen and (max-width: 479px){
.text-effect span{ font-size: 40px; }
}
@media only screen and (max-width: 359px){
.text-effect span{ font-size: 30px; }
}