Efecto máquina de escribir con HTML y CSS

Aprende a crear el efecto de máquina de escribir sin usar JavaScript

Aprenderás esto 😎 |

Al lío

Primero el HTML

Tan fácil como escribir lo que quieres animar con el efecto de máquina de escribir, en mi caso:

<p class="maquina-escribir">Aprenderás esto 😎 <span class="cursor">|</span></p>

El CSS

  .maquina-escribir {
    font-size: xx-large;
    display: block;
    font-family: monospace;
    white-space: nowrap; /* los espacios en blanco no rompen la línea */        
    width: 20ch; /* el ancho será el número de caracteres que tiene nuestra línea */
    animation: escribiendo 2s steps(20);          
    overflow: hidden;
  }

  .cursor{
    animation: 0.6s parpadeo-cursor infinite;
  }

  @keyframes escribiendo {
    from {
      width: 0;
    }
  }

  @keyframes parpadeo-cursor {
    50% {
      opacity: 0;
    }
  }

Hasta luego 🖖

¿Te gusta mi contenido? Apóyame