Réaliser un dégradé en animation css3
Résolu/Fermé
Bonjour,
J'aimerai savoir si il est possible de créer un dégradé animé en css3 ?
Je m'explique :
Dans mon "body" j'aimerais ajouter cette animation en background afin de créer un effet qui pars du rouge vers le violet vers le bleu etc... et qui reviens vers le rouge.
Merci d'avance et bonne soirée à vous.
J'aimerai savoir si il est possible de créer un dégradé animé en css3 ?
Je m'explique :
Dans mon "body" j'aimerais ajouter cette animation en background afin de créer un effet qui pars du rouge vers le violet vers le bleu etc... et qui reviens vers le rouge.
Merci d'avance et bonne soirée à vous.
A voir également:
- Réaliser un dégradé en animation css3
- Réaliser un organigramme - Guide
- Comment réaliser un graphique sur excel - Guide
- Réaliser un sommaire sur word - Guide
- Réaliser un camembert graphique - Guide
- Comment réaliser un tableau croisé dynamique - Guide
5 réponses
Utilisateur anonyme
15 mai 2014 à 22:55
15 mai 2014 à 22:55
Salut, il faut utiliser les transition et/ou les animations. Le problème est que cela ne fonctionnera que sur les navigateurs récents.
exemple avec juste des transitions :
exemple avec juste des transitions :
<style type="text/css"> html, body { height: 100%; width: 100%; } body { background: white -webkit-linear-gradient(left, #FBA1A1 0%,#EAF172 25%, #99D6FB 50%, #FB99F0 75%, #99FBBF 100%); background: white -moz-linear-gradient(left, #FBA1A1 0%, #EAF172 25%, #99D6FB 50%, #FB99F0 75%, #99FBBF 100%); background: white -ms-linear-gradient(left, #FBA1A1 0%, #EAF172 25%, #99D6FB 50%, #FB99F0 75%, #99FBBF 100%); background: white -o-linear-gradient(left, #FBA1A1 0%, #EAF172 25%, #99D6FB 50%, #FB99F0 75%, #99FBBF 100%); background: white linear-gradient(left, #FBA1A1 0%, #EAF172 25%, #99D6FB 50%, #FB99F0 75%, #99FBBF 100%); background-size: 200% 100%; -webkit-transition: all 2s linear; -moz-transition: all 2s linear; -ms-transition: all 2s linear; -o-transition: all 2s linear; transition: all 2s linear; } body:hover { background-position: 100%; } </style> </head> <body> </body>
Ah oui les navigateurs... J'avais pas pensé à ce problème.
Avec des images c'est la même chose je suis pose :)
Merci beaucoup.
Avec des images c'est la même chose je suis pose :)
Merci beaucoup.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 16/05/2014 à 15:53
Modifié par animostab le 16/05/2014 à 15:53
salut
sans css3 transition ou keyframes
ce que u veux faire est possible mais avec jquery UI et la fonction switchclass et /ou la fonction jquery animate()
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
sans css3 transition ou keyframes
ce que u veux faire est possible mais avec jquery UI et la fonction switchclass et /ou la fonction jquery animate()
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Utilisateur anonyme
16 mai 2014 à 15:56
16 mai 2014 à 15:56
Salut, avec les images cela ne pose pas de souci. Sinon fais une recherche avec un plugin jquery.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question