CSS3在hover下的幾種效果代碼分享，CSS3在鼠標經過時的幾種效果集錦
效果一：360°旋轉 修改rotate(旋轉度數)
* {
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);
}
效果二：放大 修改scale(放大的值)
* {
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);
}
效果三：旋轉放大 修改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;
-o-transition:All 0.4s ease-in-out;
}
*: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);
}
效果四：上下左右移動 修改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);
-moz-transform:translate(0,-10px);
-o-transform:translate(0,-10px);
-ms-transform:translate(0,-10px);
}