Animação Css3 Degradê Animado no Texto

Neste artigo vamos fazer um Animação Css3 Degradê Animado no Texto.

Vamos Adicionar o Html:

<h1 class="bg-text">Degradê Animado no Texto</h1>

Vamos Adicionar o Css:

.bg-text {

  font-family:'open_sansbold';
  font-size: 3em;
  letter-spacing: 5px;
  text-align: center;
  color: #35dfe3;
  background-image: -webkit-linear-gradient(50deg, #35dfe3, #35dfe3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 5s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

Veja o Resultado !

Baixar Código Veja Funcionando