- Página Inicial
- Códigos CSS Prontos
- Background Degradê Animado com Css3
- Voltar
Neste artigo vamos fazer um Background Degradê Animado com Css3 animação @keyframes
A regra especifica o código de animação @keyframes
A animação é criada mudando gradualmente de um conjunto de estilos CSS para outro.
Durante a animação, você pode alterar o conjunto de estilos CSS muitas vezes.
Especifique quando a mudança de estilo acontecerá em porcentagem, ou com as palavras-chave “de” e “para”, que é a mesma que 0% e 100%. 0% é o início da animação, 100% é quando a animação está completa.
Vamos adicionar o Html:
<section class="box"> <h1>Seu Titulo</h1> <p>Background Animado com Css3</p> </section>
Vamos Adicionar o Css:
.box { padding:10px 0px; background: linear-gradient(-40deg, #ce3c03, #b90193, #00a5d7, #23d5ab); background-size: auto; background-size: auto; background-size: 250% 250%; -webkit-animation: gradient 10s ease infinite; animation: gradient 10s ease infinite; } @-webkit-keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 60%; } 100% { background-position: 0% 60%; } } @keyframes gradient { 0% { background-position: 0% 60%; } 50% { background-position: 100% 60%; } 100% { background-position: 0% 60%; } }
Veja Resultado Final do Background Degradê Animado com Css3.
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
552 Visualizações
Deixe um comentário