Animação Css3 Degradê Animado no Texto

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

Nesta seção, projetaremos uma estrutura simples na tag  <h1> para inserir o Texto. 

Usaremos uma classe (.bg-text) para dar o efeito Degradê Animado.

Essa é a tag e classe que usaremos para criar o nosso Degradê com html e Css

Como criar Degradê Animado com CSS?

Vamos Adicionar o HTML

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

Vamos Adicionar o Css:

Nesta seção, usaremos algumas propriedades CSS para estilizar e animar o  nosso Degradê animado com html e 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);
  }
}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Animação Css3 Degradê Animado no Texto

Veja o Resultado !

Baixar Código Veja Funcionando