.titulo {
font-size: 130px;
color: #dff6ff;
letter-spacing: 15px;
text-shadow:
0 0 5px #9be7ff,
0 0 15px #4fc3f7,
0 0 30px #2196f3,
0 0 60px #1565c0,
0 0 90px #0d47a1;
}
.titulo span {
display: inline-block;
position: relative;
transition: all 0.5s ease;
animation: flotar 2s ease-in-out infinite;
}
/* Retrasos para el efecto ola */
.titulo span:nth-child(1) { animation-delay: 0s; }
.titulo span:nth-child(2) { animation-delay: 0.15s; }
.titulo span:nth-child(3) { animation-delay: 0.3s; }
.titulo span:nth-child(4) { animation-delay: 0.45s; }
/* Animación flotar arriba y abajo */
@keyframes flotar {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-25px); }
}
/* Animación de cambio de letra: gira, crece y se desvanece */
@keyframes transformar {
0% {
transform: scale(1) rotateY(0deg);
opacity: 1;
filter: blur(0);
}
50% {
transform: scale(1.5) rotateY(180deg);
opacity: 0.3;
filter: blur(6px);
color: #4fc3f7;
}
100% {
transform: scale(1) rotateY(360deg);
opacity: 1;
filter: blur(0);
}
}
.titulo span.cambiando {
animation: transformar 0.8s ease-in-out;
}
L
I
N
E