css3有哪些不错的hover效果

css3有哪些不错的hover效果

CSS3在hover下的几种效果代码分享，CSS3在鼠标经过时的几种效果集锦
效果一：360°旋转 修改rotate(旋转度数)

01 * {
02 transition:All 0.4s ease-in-out;
03 -webkit-transition:All 0.4s ease-in-out;
04 -moz-transition:All 0.4s ease-in-out;
05 -o-transition:All 0.4s ease-in-out;
06 }
07 *:hover {
08 transform:rotate(360deg);
09 -webkit-transform:rotate(360deg);
10 -moz-transform:rotate(360deg);
11 -o-transform:rotate(360deg);
12 -ms-transform:rotate(360deg);
13 }

效果二：放大 修改scale(放大的值)
01 * {
02 transition:All 0.4s ease-in-out;
03 -webkit-transition:All 0.4s ease-in-out;
04 -moz-transition:All 0.4s ease-in-out;
05 -o-transition:All 0.4s ease-in-out;
06 }
07 *:hover {
08 transform:scale(1.2);
09 -webkit-transform:scale(1.2);
10 -moz-transform:scale(1.2);
11 -o-transform:scale(1.2);
12 -ms-transform:scale(1.2);
13 }

效果三：旋转放大 修改rotate(旋转度数) scale(放大值)
01 * {
02 transition:All 0.4s ease-in-out;
03 -webkit-transition:All 0.4s ease-in-out;
04 -moz-transition:All 0.4s ease-in-out;
05 -o-transition:All 0.4s ease-in-out;
06 }
07 *:hover {
08 transform:rotate(360deg) scale(1.2);
09 -webkit-transform:rotate(360deg) scale(1.2);
10 -moz-transform:rotate(360deg) scale(1.2);
11 -o-transform:rotate(360deg) scale(1.2);
12 -ms-transform:rotate(360deg) scale(1.2);
13 }

效果四：上下左右移动 修改translate(x轴,y轴)
01 * {
02 transition:All 0.4s ease-in-out;
03 -webkit-transition:All 0.4s ease-in-out;
04 -moz-transition:All 0.4s ease-in-out;
05 -o-transition:All 0.4s ease-in-out;
06 }
07 *:hover {
08 transform:translate(0,-10px);
09 -webkit-transform:translate(0,-10px);
10 -moz-transform:translate(0,-10px);
11 -o-transform:translate(0,-10px);
12 -ms-transform:translate(0,-10px);
13 }2017-11-03