Réaliser un dégradé en animation css3
Résolu/Fermé
A voir également:
- Réaliser un dégradé en animation css3
- Réaliser un organigramme - Guide
- Réaliser un graphique sur excel - Guide
- Idée animation challenge centre d'appel - Forum Loisirs / Divertissements
- Réaliser un sommaire sur word - Guide
- Jeux animation soirée groupe 30 personnes ✓ - Forum Loisirs / Divertissements
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
737
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