HardBirch

使用CSS3构建Ajax加载动画

时间:11-02-10 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:15 点击: 5,154 次

原文地址:http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/

译者:蒋宇捷

 

 

 

  

    通常前端工程师采用gif动画图片来表现Ajax的加载。但是现在css3已经引入了动画属性,我们可以在不采用gif动画图片的情况下,采用css3达到同样的Ajax加载动画效果。那么让我们现在开始来实现想要的效果。

  

重要提示:只支持Webkit内核的浏览器(SafariChrome

示例

HTML

    在这里我们只展示demo里第一个Ajax载入示例的代码。首先我们需要一个名为“loading”的容器,以放置所有的动画元素。然后我们需要为每一列定义一个单独的div,并且统一定义一个class属性。

  

 

  

CSS3设计动画

  

下面所有的代码都带有注释。

 

 

 

加载动画23CSS代码

 

 

译者注:

    现在我们有了四种实现HTML动画的方式:

   1、GIF动画图片,优点方便,缺点是256色,背景不能完全透明,效果较差。

   2、CSS3控制,缺点是只有在支持CSS3的浏览器上有效果、实现较复杂,优点是效果好,效率高。

   3、Javascript实现,效果和CSS实现类似,效率不如原生CSS,但是可以跨浏览器支持。

   4、HTML5 Canvas,实现较复杂,能实现更高级的效果。

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: 使用CSS3构建Ajax加载动画

使用CSS3构建Ajax加载动画:目前有15 条留言

  1. 15楼
    piaolankeke:

    [e03]

    2011-02-11 09:21 [回复]
  2. 14楼
    lfsf802:

    [e03]

    2011-02-15 17:31 [回复]
  3. [e01]

    2011-02-15 17:34 [回复]
  4. 12楼
    zhuzhaoa:

    别的都白给

    2011-02-15 17:55 [回复]
  5. 11楼
    zhuzhaoa:

    在中国,只能兼容IE

    2011-02-15 17:55 [回复]
  6. 10楼
    grui:

    [e01][e01][e03][e03]

    2011-02-15 22:21 [回复]
  7. ie6还存在的天朝。。。这些都是浮云

    2011-02-16 11:37 [回复]
  8. 8楼
    hfahe:

    回复 huanleicool:呵呵 在手机上可不是IE的天下

    2011-02-16 13:47 [回复]
  9. 7楼
    MOTA:

    累不累啊?这样做?????
    - -~
    有那精力写CSS不如做个图
    兼容性还好

    2011-02-16 15:26 [回复]
  10. 6楼
    walthehai:

    很好,学些了

    2011-02-16 15:44 [回复]
  11. [e05]

    2011-02-16 22:32 [回复]
  12. 4楼
    wzd24:

    这叫CSS控。

    2011-02-18 17:39 [回复]
  13. 地板
    JamesXieyf:

    [e01]虽然不支持IE6在天朝不实用,不过还是要顶一下~~

    2011-03-10 09:44 [回复]
  14. [e01]

    2011-03-10 12:58 [回复]
  15. 沙发
    minjun0901:

    function Ding(){
    alert("ding");
    }

    2011-11-17 20:09 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐