Texto Loop Neon com css

Neste artigo vamos fazer um texto com efeito neon piscando com css.

vamos adicionar o Html:

<div class="title_loop"> 

    <div class="title"> <span>Loop</span> Nerd</div> 

</div>

Vamos adicionar o css:

/*Loop Neon*/
.title_loop {

  width:100%;
  height:auto;
  text-align: center;

}

.title_loop .title {

    font-family: 'open_sansregular';
    font-size: 6em;
    color: #fff;
    text-shadow: 0 -50px 100px, 0 0 2px, 0 0 1em #00afb3, 0 0 0.5em #008d93, 0 0 0.1em #00abff, 0 10px 5px #000;
}
.title_loop .title span{

  animation: blink linear infinite 2s;
  font-weight: bold;
  font-family: 'open_sansbold';

}
.title_loop .title span:nth-of-type(2){
  animation: blink linear infinite 4s;
}
@keyframes blink {
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79%{
     color: #242424;
  }
  80% {
    
    text-shadow: none;
  }
  81% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #242424;
    text-shadow: none;
  }
  83% {
    color: inherit;
    text-shadow: inherit;
  }
  92% {
    color: #242424;
    text-shadow: none;
  }
  92.5% {
    color: inherit;
    text-shadow: inherit;
  }
}
/*Loop Neon*/

Veja o Resultado !

Baixar Código Veja Funcionando