你是否遇到过这样的情景:

1、用gif格式的loading菊花会有背景颜色,与页面背景格格不入
2、于是,设计师给你一帧一帧变化的透明png合图,你能想到的就是用JS来控制
3、最终,你会发现用JS控制的loading菊花,对网页性能有一定的影响

        好在现在,这个HTML5到来的时代,如果你不用考虑浏览器兼容问题,你就可以用CSS3轻轻松松实现透明loading菊花的加载效果,下面的Step By Step 会让你茅塞顿开:

step1:准备图片

首先,我们需要准备类似下面的png合图一张,如下:

上面图片只是类似,你可以根据自己的喜好设计图片的表现方式,但是每帧的效果要尽量不一样,这样才会有loading效果

step2: 设置菊花样式

step3:加入CSS3动画样式

keyframes :定义一系列关键帧的样式区别,用来作为移动到下一个关键帧的动画,类似flash里面对动画的出理

step4:最后放入一个容器中

O(∩_∩)O哈哈~~就这样我们的loading菊花就顺利完成了,如果想在Firefox上使用,只需把-webkit-前缀改成-moz-即可,最终效果如下:

点击我查看demo

 

PS:如果你用不支持CSS3动画属性的浏览器来打开这个demo,恐怕你要失望了~(*^__^*) 嘻嘻……

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/05/loadingpng/

  1. prius 2013 年 11 月 14 日

    html包了两层,css代码那么多,一张图就10多k,就不考虑性能么?

  2. hereen 2013 年 8 月 31 日

    楼主对“菊花”很有研究啊,,看到好几篇和“菊花”有关的了。。。

  3. 佳佳小朋友 2012 年 11 月 24 日

    此方法只可以用于webkit内核的浏览器,其他浏览器即使支持css3也无法播放

  4. evan 2012 年 8 月 23 日

    用一个图片(非sprite)做背景.animate控制rotate就可以实现了吧.

  5. luzhang 2012 年 6 月 8 日

    您的菊花demo页怎么不转了?

  6. unicac 2012 年 5 月 5 日

    有点得不偿失!

  7. wong2 2012 年 5 月 4 日

    有个js库:http://fgnass.github.com/spin.js/ 就是专门用css3做loading的,但没有用图片,而且对旧浏览器提供了fallback

    • TAT.sheran

      sheran 2012 年 5 月 7 日

      ah,good way ~~thanks~~:)

      • 罗佳大人 2012 年 7 月 30 日

        你觉得用一个大div包含12个小的转过一定角度的有色div(菊花瓣),再用js按序控制透明度来达到看起来在旋转的目的怎么样?

发表评论