Skip to main content
3 de 3
adicionou 101 caracteres ao conteúdo
Leandro Angelo
  • 9,4mil
  • 3
  • 23
  • 35

Pular linha css keyframes

Estou com uma tremenda dificuldade, fiz uma pequena frescura para quando entrar no site o texto mostre igual quando digita sozinho com keyframe.

Dúvida: Como posso pular linha no meu texto sem que o keyframe também leia, por exemplo "
", ou seja o texto sairia assim: "meu texto 'br>meu texto |" tudo junto e com o tag br.

function typeWrite(elemento){
    const textoArray = elemento.innerHTML.split('');
    elemento.innerHTML = ' ';
    textoArray.forEach(function(letra, i){   
      
    setTimeout(function(){
        elemento.innerHTML += letra;
    }, 75 * i)

  });
}
const titulo = document.querySelector('.titulo-principal');
typeWrite(titulo);
.titulo-principal{
}
.titulo-principal:after{
 content: '|';
 margin-left: 5px;
 opacity: 1;
 animation: pisca .7s infinite;
}

@keyframes pisca{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}
<p class="titulo-principal">Meu texto br> Meu Texto</p>