Code-Sharing mehrerer CSS3-Effekte unter Hover, eine Sammlung mehrerer CSS3-Effekte, wenn die Maus darüber bewegt wird
Effekt 1: 360°-Drehung zum Ändern der Drehung (Grad der Drehung)
* {
Transition:All 0.4s Easy-In-Out;
-webkit-transition:All 0.4s Easy-In-Out;
-moz-transition:All 0.4s Easy-In-Out ;
-o-transition:All 0.4s easy-in-out;
}
*:hover {
transform:rotate(360deg);
-webkit-transform:rotate(360deg );
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
}
Effekt 2: Maßstab vergrößern und ändern (vergrößerter Wert)
* {
Transition:All 0.4s Easy-In-Out;
-Webkit-Transition:All 0.4s Easy-In-Out;
-moz -transition:Alle 0,4 Sekunden Ease-in-out;
-o-transition:Alle 0,4 Sekunden Ease-in-out;
}
*: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:All 0.4s easy-in-out;
-o-transition:All 0,4 s einfaches Ein-Aus;
}
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) ;
}
Effekt 4: Nach oben, unten, links und rechts bewegen, um die Übersetzung (x-Achse, y-Achse) zu ändern
* {
Übergang: Alle 0,4 Sekunden Easy-In-Out;
-webkit-transition:Alle 0,4 Sekunden Easy-In-Out;
-o-transition :Alle 0,4 s einfacher Ein-Aus;
}
transform:translate(0,-10px);
-webkit-transform:translate(0,-10px);
-moz-transform:translate(0, -10px);
-o-transform:translate(0,-10px);
-ms-transform:translate(0,-10px); Im Zusammenhang mit dem Hover-Effekt achten Sie bitte auf die chinesische PHP-Website!
