CSS3在hover下的效果

CSS3在hover下的幾種效果代碼分享，CSS3在滑鼠經過時的幾種效果集錦

效果一：360°旋轉修改rotate(旋轉度數)

* {
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition: # -o-transition:All 0.4s ease-in-out;
}
*:hover {
transform:rotate(360deg);## ## -moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:ate
de); ：放大修改scale(放大的值)
* {
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out -webkit-transition:All 0.4s ease-in-out > # -transition:All 0.4s ease-in-out;

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

}
*:hover {
}
*:hover {
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);#1 );
}


效果三：旋轉放大修改rotate(旋轉度數) scale(放大值)

* {

transition:All 0.4s ease-in -out;

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

-moz in-out;

}
*:hover {
transform:rotate(360deg) scale(1.2);
-webkit-transform:rotate(360g) -webkit-transform:rotate(360g) ) moz-transform:rotate(360deg) scale(1.2);
-o-transform:rotate(360deg) scale(1.2);
rot#ms-transform:rot#ate(360de); }


效果四：上下左右移動修改translate(x軸,y軸)

* {
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);## -10px);
-o-transform:translate(0,-10px);
-ms-transform:translate(0,-10px);
# }# #CSS#CSS#CSS# hover下的效果相關文章請關注PHP中文網！