分享4种CSS3效果(360度旋转、旋转放大、放大、移动)

我的网站•2019-04-05•CSS• 5181• 0•A⁺ A^-

效果一：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(放大值) 效果演示地址

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 }

发表评论