Animação Css3 Texto Neon Loop

Neste artigo vamos fazer um texto neon piscando em loop com elemente keyframes animate no css.

Vamos Adicionar o Html:

 <h1 class="pisca">

    <span>L</span>
    <span>o</span>
    <span>o</span>
    <span>P</span>
    <span>N</span>
    <span>e</span>
    <span>r</span>
    <span>d</span>

 </h1>

Vamos Adicionar o Css:

.pisca{
  
  font-size:2.4em;
  font-family: 'open_sansbold';
  font-weight: bold; text-align:center;
  display: inline-flex;

}

.pisca span{

  color: #242424;
  font-family: 'open_sansbold';
  display: block;
  float: left;
  position: relative;
  margin: 0 4px;
  padding: 0;
  animation: animate 2.5s linear infinite;
  
}

.pisca span:nth-child(1){
  animation-delay: 0s;
}
.pisca span:nth-child(2){
  animation-delay: .25s;
}
.pisca span:nth-child(2){
  animation-delay: .5s;
}
.pisca span:nth-child(3){
  animation-delay: .75s;
}
.pisca span:nth-child(4){
  animation-delay: 1s;
}
.pisca span:nth-child(5){
  animation-delay: 1.25s;
}
.pisca span:nth-child(6){
  animation-delay: 1.5s;
}
.pisca span:nth-child(7){
  animation-delay: 1.75s;
}
.pisca span:nth-child(8){
  animation-delay: 2s;
}



@keyframes animate {
  0%, 100%{
    color: #ffffff;
    text-shadow: 0 0 20px #00c6ff,
      0 0 10px #00c6ff,
      0 0 40px #00c6ff,
      0 0 80px #00c6ff,
      0 0 120px #00c6ff,
      0 0 200px #00c6ff;

  }

  5%, 95%{ color: #242424; text-shadow: none;
  
  }
}

Veja o Resultado !

Baixar Código Veja Funcionando