vue技术交流群（864583465) 基于css3中的animation和transform实现div的旋转和缩放效果

1、旋转

<div id="loading">旋转起来</div>

<style> 
#loading{
	width:100px;
	height:100px;
	line-height: 100px;
	text-align: center;
	border-radius: 50%;
	background:red;
	animation: rotating 2s linear infinite;
}
@keyframes rotating{
	from{  //动画开始时对于的样式
		transform: rotate(0deg);
	}
	to{ // 动画结束时对应的样式
		transform: rotate(360deg);
	}
}
</style>

2、缩放

<div id="scale">大小变起来</div>

<style> 
#scale{
	width:100px;
	height:100px;
	line-height: 100px;
	text-align: center;
	border-radius: 50%;
	background:red;
	animation: scale 2s linear infinite;
}
@keyframes scale{
	0%{  // 动画开始样式
		transform: scaleZ(1);
	}
	50%{ // 动画中间样式，可自定义中间样式，修改百分比即可
		transform: scale(2);
	}
	100%{ //动画结束样式
		transform: scale(1);
	}
}
</style>