您的位置：首页 > Web前端 > CSS

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

2015-11-03 15:40 627 查看

转自：http://www.j q-school.com/Show.aspx?id=281

本文仅供自己学习而转载，由于效果掩饰地址的转载出现问题，强烈建议去源网站查看示例！上面为源网站网址，中间大段的空格去掉。

效果一：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	}

　　

Demo打包下载

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航