首页 > 代码库 > CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦

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    }

 

  • 本文:【CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦】
  • 文章地址:http://dongguan.seosrx.net/website/34.html 转载请注明出处

CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦