【疯狂的菊花系列】使用CSS3制作PNG Loading图

Loading图, 也就是俗称的菊花, 大部分网站都会用到, 而一般情况用的都是gif动画, 但是gif能保存的颜色太少, 导致有渐变的图导出来后有毛边, 很不美观.

不过随着html5和css3的出炉, 我们终于可以把loading做的更加美观啦.

之前用png制作loading动画并不是没有, 但是需要使用js以及制作一张包含所有动作的png图片(就像跑马灯一样), 咱不熟ps, 画起来相当吃力.

而在html5/css3的带领下, 我们又有了两个新的方法: canvas和css动画.

但是我是相当讨厌用js代替css本身就可以实现的功能, 而且本人觉得在cavas上画图太累( 这不就是把ps搬到网页么…), 所以就把魔爪伸向了css3, 嘿嘿~~

使用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查看:

http://www.w3.org/TR/css3-animations/

http://css3.bradshawenterprises.com/animations/

http://css3.bradshawenterprises.com/transforms/