h5动画效果总结

一些常用的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);
	}
}

　　

先写这些，未完待续......

转载于:https://www.cnblogs.com/sun927/p/5842852.html