L'effet de CSS3 en survol

Partage de code de plusieurs effets de CSS3 au survol, une collection de plusieurs effets de CSS3 au passage de la souris

Effet 1 : Rotation 360° pour modifier la rotation (degré de rotation)

* {
transition : toutes les entrées-sorties faciles en 0,4 s ;
-webkit-transition : toutes les entrées-sorties faciles en 0,4 s ;
-moz-transition : toutes les entrées-sorties faciles en 0,4 s ;
-o-transition : entrée-sortie facile en 0,4 s ;
}
*:hover {
transform:rotate(360deg);
-webkit-transform:rotate(360deg );
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
}

Effet 2 : Agrandir et modifier l'échelle (valeur agrandie)
* {
transition : toutes les 0,4 s d'entrée-sortie facile ;
-webkit-transition : toutes les 0,4 s d'entrée-sortie facile ;
-moz -transition : Tous les 0,4 s d'entrée-sortie facile ;
-o-transition : Tous les 0,4 s d'entrée-sortie facile ;
}
*:hover {
transform:scale( 1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform : scale(1.2 ; -out;
-webkit-transition:Tous 0,4s facilité d'entrée-sortie;

-o-transition:Tous 0,4 s facilité d'entrée et de sortie ;
}

transform:rotate(360deg) scale(1.2);
-webkit-transform:rotate(360deg) scale(1.2);
- moz-transform:rotate(360deg) scale(1.2);
-o-transform:rotate(360deg) scale(1.2);
-ms-transform:rotate(360deg) scale(1.2) ;
🎜>

Effet 4 : Déplacez-vous vers le haut, le bas, la gauche et la droite pour modifier la translation (axe x, axe y)

* {
transition :
-webkit-transition:Tous les 0,4 s d'entrée-sortie faciles;
-moz-transition:Tous les 0,4 s d'entrée-sortie faciles;

}
*:hover {

-webkit-transform:translate(0,-10px);
-moz-transform:translate(0, -10px);
          -o-transform:translate(0,-10px);
            -ms-transform:translate(0,-10px); concernant l'effet sous le survol, veuillez faire attention au site Web PHP chinois !