Secouez moi, secouez moi !

Par Maximum 34 dans 8-Classiques CSS le 2 Septembre 2014 à 20:00

Pour secouer une image ou autre chose au passage de la souris

Demandez le CSS via les commentaires

« Html de générateur de texte arc en cielTexte qui clignote »

Tags : secouez-moi

Commentaires

Miss Louna

Lundi 5 Janvier 2015 à 14:40

Bonjour,

Cette effet est vraiment super! Je peux avoir le code CSS stp ?

Répondre

Maximum 34

Mercredi 7 Janvier 2015 à 13:03

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:

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>

Répondre

Miss Louna

Mercredi 7 Janvier 2015 à 14:25

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...

Répondre

SuteishÏ

Jeudi 28 Juillet 2016 à 15:18