搜索
读书笔记

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

读书笔记•2019-04-05•CSS• 5171• 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}


本文标题：分享4种CSS3效果(360度旋转、旋转放大、放大、移动)
本文链接：http://zvvv.cn/post/592.html
作者授权：除特别说明外，本文由 Exciting 原创编译并授权 读书笔记 刊载发布。
版权声明：本文不使用任何协议授权，您可以任何形式自由转载或使用。
☆收藏0
发表评论