css3hover是什么,CSS3在hover下的几种效果

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);

}

内容来源于网络如有侵权请私信删除