Réaliser un dégradé en animation css3
Résolu
TheBleedz
-
TheBleedz -
TheBleedz -
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
- Réaliser un camembert graphique - Guide
- Dp animation maker - Télécharger - Animation
- Réaliser un sommaire sur word - Guide
- Comment réaliser un graphique sur excel - Guide
5 réponses
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question