Loading图，也就是俗称的菊花，大部分网站都会用到，而一般情况用的都是gif动画，但是gif能保存的颜色太少，导致有渐变的图导出来后有毛边，很不美观。
不过随着html5和css3的出炉，我们终于可以把loading做的更加美观啦。
之前用png制作loading动画并不是没有，但是需要使用js以及制作一张包含所有动作的png图片(就像跑马灯一样)，咱不熟ps，画起来相当吃力。
而在html5/css3的带领下，我们又有了两个新的方法: canvas和css动画。
但是我是相当讨厌用js代替css本身就可以实现的功能，而且本人觉得在cavas上画图太累( 这不就是把ps搬到网页么...)，所以就把魔爪伸向了css3，嘿嘿~~
more
使用css3的animation属性，一句js都不用写就达到目标。
当然现在animation还没全面支持，webkit内核的浏览器支持的比较好(-webkit-animation)。另外测试时发现我的firefox6也有animation属性了，当然要加上私有前缀(-moz-)。
这个动画的原理很简单，给png加上transform的rotate属性，使其相对原有位置旋转，再加上animation不断的跑就行了。
代码如下:
@-webkit-keyframes loading{
0%{
-webkit-transform: rotate(0deg);
}
50%{
-webkit-transform: rotate(180deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes loading{
0%{
-moz-transform: rotate(0deg);
}
50%{
-moz-transform: rotate(180deg);
}
100%{
-moz-transform: rotate(360deg);
}
}
loading-img{
-webkit-transform-origin: center center;
-webkit-animation-name: loading;
-webkit-animation-duration: 1.2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-transform-origin: center center;
-moz-animation-name: loading;
-moz-animation-duration: 1.2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
}
效果点击这里查看，目前能在webkit内核浏览器以及firefox6(5以下没测)以上看到动画效果，在ff6上面偶尔还有点卡，太让人失望了╮(╯▽╰)╭~~
至于transform和animation的详细介绍，我就不多说了，可以点击下面的url查看: