Skip to main content
Tweeted twitter.com/StackOverflowPT/status/1292883417479229443
adicionou 101 caracteres ao conteúdo
Fonte Link
Leandro Angelo
  • 9,4mil
  • 3
  • 23
  • 35

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.

Obrigado!

HTML:

<p class="titulo-principal">Meu texto br> Meu Texto</p>

Valor imprimido: Meu Texto br> Meu texto |

CSS:

.titulo-principal{
}
.titulo-principal:after{
 content: '|';
 margin-left: 5px;
 opacity: 1;
 animation: pisca .7s infinite;
}

@keyframes pisca{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}

Javascript:

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>
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);
 

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.

Obrigado!

HTML:

<p class="titulo-principal">Meu texto br> Meu Texto</p>

Valor imprimido: Meu Texto br> Meu texto |

CSS:

.titulo-principal{
}
.titulo-principal:after{
 content: '|';
 margin-left: 5px;
 opacity: 1;
 animation: pisca .7s infinite;
}

@keyframes pisca{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}

Javascript:

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);

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>
 

adicionou 415 caracteres ao conteúdo
Fonte Link

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.

Obrigado!

HTML:

<p class="titulo-principal">Meu texto br> Meu Texto</p>

Valor imprimido: Meu Texto br> Meu texto |

CSS:

.titulo-principal{
}
.titulo-principal:after{
 content: '|';
 margin-left: 5px;
 opacity: 1;
 animation: pisca .7s infinite;
}

@keyframes pisca{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}

Javascript:

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);

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.

Obrigado!

HTML:

<p class="titulo-principal">Meu texto br> Meu Texto</p>

Valor imprimido: Meu Texto br> Meu texto |

CSS:

.titulo-principal{
}
.titulo-principal:after{
 content: '|';
 margin-left: 5px;
 opacity: 1;
 animation: pisca .7s infinite;
}

@keyframes pisca{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}

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.

Obrigado!

HTML:

<p class="titulo-principal">Meu texto br> Meu Texto</p>

Valor imprimido: Meu Texto br> Meu texto |

CSS:

.titulo-principal{
}
.titulo-principal:after{
 content: '|';
 margin-left: 5px;
 opacity: 1;
 animation: pisca .7s infinite;
}

@keyframes pisca{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}

Javascript:

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);
Fonte Link

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.

Obrigado!

HTML:

<p class="titulo-principal">Meu texto br> Meu Texto</p>

Valor imprimido: Meu Texto br> Meu texto |

CSS:

.titulo-principal{
}
.titulo-principal:after{
 content: '|';
 margin-left: 5px;
 opacity: 1;
 animation: pisca .7s infinite;
}

@keyframes pisca{
    0%, 100%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
}