• Secouez moi, secouez moi !

    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 »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Lundi 5 Janvier 2015 à 14:40

    Bonjour,

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

    2
    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:

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

     

     

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

    4
    Jeudi 28 Juillet 2016 à 15:18

    Bonjour, je trouve ton blog très pratique et merci pour ce code ^.^

    Bonne journée !



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl