Efeito de Máquina de Escrever com HTML e CSS

Descubra como criar um incrível efeito de máquina de escrever com HTML e CSS, simulando a digitação de texto com animação fluida e cursor piscante. Ideal para destacar mensagens em sites e projetos criativos na web.

HTML: 

    <!-- Texto animado -->
    <div class="text">Bem-vindo ao mundo do desenvolvimento web!</div>

CSS:

   .text {
          /* Define a largura com base no número de caracteres (38ch = 38 caracteres) */
          width: 42ch;
          /* Animação de digitação e cursor piscante */
          animation: typing 4s steps(38), pulse 0.5s step-end infinite alternate;
          /* Impede que o texto quebre linha */
          white-space: nowrap;
          /* Oculta o texto que ainda não foi "digitado" */
          overflow: hidden;
          /* Aplica um cursor à direita */
          border-right: 3px solid;
          /* Configuração de fonte para simular uma máquina de escrever */
          font-size: 16px;
          font-family: monospace;
          /* Centraliza o texto */
          margin: 0 auto;
   }


   /* Animação de digitação */
   @keyframes typing {
       from {
            width: 0; /* O texto começa invisível */
       }
   }


   /* Animação do cursor piscante */
      @keyframes pulse {
          50% {
              border-color: transparent; /* Cursor desaparece no meio do ciclo */
      }
   }