Die Wirkung von CSS3 unter Hover

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;

-moz-transition:All 0.4s easy-in-out;

-o-transition:All 0,4 s einfaches Ein-Aus;
}

*:hover {

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;

-moz-transition:Alle 0,4 Sekunden Easy-In-Out;

-o-transition :Alle 0,4 s einfacher Ein-Aus;
}

*:hover {

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!