Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Animation CSS background gradient

Dernière modification : juin 2022

Le code :




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




*,*::before,*::after{

box-sizing: border-box;

}	



.cadre-demo{


background: linear-gradient(45deg,hsl(203,77%,61%) 0%,
/*pour une transition plus douce du dégradé*/50%,
hsl(248, 78%, 62%) 100%);
animation: anim-demo 20s linear infinite

}

@keyframes anim-demo{

to{

filter:hue-rotate(360deg)

}

}





Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.