一些常用的h5效果，自己總結的，用的時候直接拿，方便快捷！

1.懸浮時放大：

.one{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
.one:hover{transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1); cursor:pointer;}

2.懸浮時轉一圈：

.two{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
.two:hover{transform:rotate(360deg); -webkit-transform:rotate(360deg);-moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg) ; cursor:pointer;}

3.自動不停轉圈

.three{animation:mymove linear 30s infinite;-webkit-animation:mymove linear 30s infinite;}
@keyframes mymove
{
	from {
		transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		-o-transform:rotate(0deg); 
		-ms-transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
		-moz-transform:rotate(360deg);
		-o-transform:rotate(360deg); 
		-ms-transform:rotate(360deg);
	}
}
 
@-webkit-keyframes mymove /*Safari and Chrome*/
{
	from {
		transform:rotate(0deg); 
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg); 
		-o-transform:rotate(0deg); 
		-ms-transform:rotate(0deg);
	}
	to {
　　　　　　　　transform:rotate(360deg); 
	　　-webkit-transform:rotate(360deg);
	　　-moz-transform:rotate(360deg); 
	　　-o-transform:rotate(360deg); 
	　　-ms-transform:rotate(360deg);
　　　　}
}

　　4.自動顏色越來越淺

.four{animation:mymove linear 5s infinite;-webkit-animation:mymove linear 5s infinite; /*Safari and Chrome*/}

@keyframes mymove
{
	from {
　　　　　　　　　　opacity:1;
		filter:Alpha(opacity=100); 
		transform:scale(1);
		-webkit-transform:scale(1);
		-moz-transform:scale(1);
		-o-transform:scale(1);
		-ms-transform:scale(1);}
	to {
　　　　　　　　　　opacity:0.1;
		filter:Alpha(opacity=10);
		transform:scale(1.1);
		-webkit-transform:scale(1.1);
		-moz-transform:scale(1.1);
		-o-transform:scale(1.1);
		-ms-transform:scale(1.1);}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
	from {
        　　opacity:1;
	　　filter:Alpha(opacity=100);
	　　transform:scale(1);
	　　-webkit-transform:scale(1);
	　　-moz-transform:scale(1);
	　　-o-transform:scale(1);
	　　-ms-transform:scale(1);
	 }
	to {
       　　 opacity:0.1;
	　　filter:Alpha(opacity=10);
	　　transform:scale(1.1);
	　　-webkit-transform:scale(1.1);
	　　-moz-transform:scale(1.1);
	　　-o-transform:scale(1.1);
	　　-ms-transform:scale(1.1);
	}
}

　　

先寫這些，未完待續......

總結

以上是生活随笔為你收集整理的h5动画效果总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。