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

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 按序控制透明度来达到看起来在旋转的目的怎么样?

发表评论到 luzhang