半调
qrcode

扫码用手机继续看

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

半调2019-04-05CSS 909 0A+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}


打赏 支付宝打赏 微信打赏
本文标题:分享4种CSS3效果(360度旋转、旋转放大、放大、移动)
本文链接:https://594.sb/post/592.html
作者授权:除特别说明外,本文由 Exciting 原创编译并授权 半调 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

加入我们吧!登录注册
登录
用户名
密码
注册
用户名
密码
确认密码
昵称
邮箱
验证码
找回密码
用户名
邮箱
※ 重置链接将发送到邮箱