-
Secouez moi, secouez moi !
-
Commentaires
Bonjour Miss Louna,
si tu veux cet effet sur une seule image dans un article, il te faut insérer l'image dans l'article avec le bouton 'image' de l'éditeur d'article puis
1- passer dans l'éditeur source avec le bouton <>
2- mettre le code de l'image insérée dans une class cocotier afin que l'effet CSS s'applique à cette image.
Le code d'une image commence par <img src et se termine par la fermeture balise />
Donc avant <img, tu mets <div class="cocotier"> et après /> tu mets </div>
ça donne un truc comme cela:<div class="cocotier"><img src="http://ekladata.com/s-4UKUYZtjMo28ic6Tb3KvGZStk@250x188.jpg" alt="secouez-moi"/></div>
3- toujours dans la code source, copier le styleCSS pour les images qui se trouvent dans la class cocotier
Ne sois pas effrayée par la longueur du CSS<style><!-- .cocotier img:hover{ -webkit-animation: tada 1s; -moz-animation: tada 1s; -ms-animation: tada 1s; -o-animation: tada 1s; animation: tada 1s; } @-webkit-keyframes tada { 0% {-webkit-transform: scale(1);} 10%, 20% {-webkit-transform: scale(0.8) rotate(-3deg);} 30%, 50%, 70%, 90% {-webkit-transform: scale(1) rotate(3deg);} 40%, 60%, 80% {-webkit-transform: scale(1) rotate(-3deg);} 100% {-webkit-transform: scale(1) rotate(0);} } @-moz-keyframes tada { 0% {-moz-transform: scale(1);} 10%, 20% {-moz-transform: scale(0.8) rotate(-3deg);} 30%, 50%, 70%, 90% {-moz-transform: scale(1) rotate(3deg);} 40%, 60%, 80% {-moz-transform: scale(1) rotate(-3deg);} 100% {-moz-transform: scale(1) rotate(0);} } @-ms-keyframes tada { 0% {-ms-transform: scale(1);} 10%, 20% {-ms-transform: scale(0.8) rotate(-3deg);} 30%, 50%, 70%, 90% {-ms-transform: scale(1) rotate(3deg);} 40%, 60%, 80% {-ms-transform: scale(1) rotate(-3deg);} 100% {-ms-transform: scale(1) rotate(0);} } @-o-keyframes tada { 0% {-o-transform: scale(1);} 10%, 20% {-o-transform: scale(0.8) rotate(-3deg);} 30%, 50%, 70%, 90% {-o-transform: scale(1) rotate(3deg);} 40%, 60%, 80% {-o-transform: scale(1) rotate(-3deg);} 100% {-o-transform: scale(1) rotate(0);} } @keyframes tada { 0% {transform: scale(1);} 10%, 20% {transform: scale(0.8) rotate(-3deg);} 30%, 50%, 70%, 90% {transform: scale(1) rotate(3deg);} 40%, 60%, 80% {transform: scale(1) rotate(-3deg);} 100% {transform: scale(1) rotate(0);} } --></style> J'ai tout compris je l'ai fait sur mon blog teste (qui est actuellement en mode "hors ligne")
Merci beaucoup pour le tuto'! Je n'ai pas juste appris a faire cette effet mais je comprend mieux le HTML maintenant je peux modifier d'autre chose maintenant...(comme déplacer une image du contenue hors des article eklablog) On a juste a prendre la classe et le mettre dans le css avec la position qu'on veux...
Ajouter un commentaire
Bonjour,
Cette effet est vraiment super! Je peux avoir le code CSS stp ?