先看看这个Demo截图，类似的动画图标在平时的应用开发中非常多见，在操作等待过程中，我们经常看到很多漂亮的动态旋转图标，之前都是采用gif动画或者js来实现动画效果，如今可以直接利用css3 transform属性来实现。几行代码就可以获得很酷的效果，赶紧一起来试一试吧！
下面我们一起看看如何实现的吧
整个代码非常简单，直接贴出来：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3: Spinner动画效果 |美瑞网mxria.com</title>
<style>
#spinner1 {
position: absolute;
top: 30%;
left: 40%;
height: 128px;
width: 128px;
-webkit-mask-image: url(spinner.png);//采用遮罩的方式，提供一个图形
background-color: #000;
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
#spinner2 {
position: absolute;
top: 10%;
left: 40%;
height: 64px;
width: 64px;
background-image:
url(spinner2.gif);
-webkit-animation-name: spinnerRotate;//关键帧
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;//动画循环的次数：无限次 -webkit-animation-timing-function: linear;
}
@-webkit-keyframes spinnerRotate {//设置动画效果的关键帧
from {
-webkit-transform:rotate(0deg); }
to {
-webkit-transform:rotate(360deg);
}
}
</style>
</head>
<body>
<p align=center>CSS3 Transform动画效果--
<a href='http://www.mxria.com'>美瑞网mxria.com</a>
</p> <div id="spinner1"></div>
<div id="spinner2"></div>
</body>
</html>
对应的关键知识点介绍：
-webkit-transform:rotate(0deg);
这是transform中的rotate旋转属性，参数为x deg，表示旋转多少度
相关CSS3 Transform制作动态旋转图标