Home >Web Front-end >CSS Tutorial >The effect of CSS3 under hover

The effect of CSS3 under hover

高洛峰
高洛峰Original
2017-03-01 15:05:351630browse

Code sharing of several effects of CSS3 under hover, a collection of several effects of CSS3 when the mouse passes over it

Effect 1: 360° rotation to modify rotate (degree of rotation)

* {
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
}
*:hover {
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
}

Effect 2 :Enlarge and modify scale (enlarged value)
* {
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz -transition:All 0.4s ease-in-out;
-o-transition:All 0.4s 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 ease-in-out;

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

-o-transition:All 0.4s ease- in-out;
}

*:hover {

                                                                      through ‐ ‐ ‐ ‐ ‐‐‐‐‐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);
}


Effect 4: Move up, down, left and right to modify translate(x-axis, y-axis)

* {
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;

}

*: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);
}

More CSS3 in For articles related to the effect under hover, please pay attention to the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn