Usar animaciones para dotar de efectos a nuestros sitios tiene que ser considerado uno de los superpoderes de todo buen frontend. Entre esos efectos hacer un cursor que parpadee como el de Notion o la terminal cuando no estamos escribiendo, puede ser algo interesante.
Para eso, primero se tiene que definir el texto con el que vamos a jugar.
Con esto listo, definimos en los estilos que el span va a
tener un borde derecho de 2px . Este borde es el que va a
funcionar como cursor y con la propiedad animation indicamos
cómo va a operar la animación.
.blink span {
letter-spacing: .2rem;
border-right: 2px solid var(--p-color);
animation: blink 3s steps(30, end), cursor 1s step-end infinite;
}
@keyframes blink {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes cursor {
from, to {
border-color: transparent;
}
50% {
border-color: var(--p-color);
}
}