Animation CSS3 background gradient

🏠 Accueil blog » Démonstrations CSS3 Voir d'autres démonstrations CSS3
Cette démonstration n'est pas compatible avec cette version d'Internet Explorer

Effet de mode oblige, voici comment animer un background avec les dégradés linéaires (linear-gradient). Utilisation d'une animation CSS3 avec le filtre hue-rotate.

✔ Support navigateurs :


<div class=cadre-demo></div> 


.cadre-demo{
height:500px;
background:linear-gradient(45deg,hsl(203,77%,61%) 0%,hsl(0,0%,0%) 100%);
animation:anim-demo 20s linear infinite}

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

👉 Source, inspiration, ressources :

Le même principe mais avec une approche différente

Autre exemple 1

Autre exemple 2

Voir d'autres démonstrations CSS3