HardBirch

用CSS3实现动画进度条

时间:11-03-19 栏目:HTML5移动开发 作者:张飞不张,文采横飞 评论:41 点击: 12,286 次

 

    CSS3的新特性为我们实现漂亮的进度条扫清了障碍,我们可以完全不需要任何图片和简单的Javascript代码就可以构建。

一、第一个例子

    效果图:

    Demo地址:http://namepk.sinaapp.com/demo/progress.html

1、  基本的HTML

    HTML代码非常简单:

 

    loading-status表示外层的容器,precent表示进度条。

2、  CSS代码

 

    我们为外层容器添加了边框、圆角、阴影和渐变背景,效果如下图所示:

    进度条的CSS代码如下:

 

    将width修改为10%可以看到效果:

3、动画

    通过控制width的百分比就可以控制进度条的显示,动画用CSS3animation或者transition都可以实现,这里我们选择animation

 

    然后我们通过Javascript来控制precent元素的宽度就可以实现进度条的动画效果了:

 

二、第二个例子

    下面我们实现一个更为复杂一点的进度条:

    Demo地址:http://namepk.sinaapp.com/demo/progress.html

1、基本的HTML

 

    一共是三个元素。

2、  CSS样式

 

    外框样式如下所示:


 

    基本进度条样式如下所示:

    为内层的span定义的样式如下,主要是设定了一个渐变的背景。

 

    样式如下:

    我们还需要添加一个属性:

 

    现在效果如下图所示:

3、  动画

    动画我们通过改变background-position来实现。代码如下:

 

    最终的效果如下:

    写在最后:由我担任作者的一本HTML5入门书籍正在策划和写作中,大家可以期待一下,呵呵。

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: 用CSS3实现动画进度条

用CSS3实现动画进度条:目前有41 条留言

  1. 41楼
    xjtuhw:

    [e03] 你都要写书啦 太牛了 期待~

    2011-03-20 01:13 [回复]
  2. 40楼
    xjtuhw:

    [e03] 你都要写书啦 太牛了 期待~

    2011-03-20 01:15 [回复]
  3. 39楼
    xjtuhw:

    csdn好像不兼容chrome 我在chrome下没法评论

    2011-03-20 01:16 [回复]
  4. 38楼
    xjtuhw:

    [e08]又可以发了 怎么删除评论呢? 晕~

    2011-03-20 01:19 [回复]
  5. 37楼
    hfahe:

    回复 xjtuhw:[e08]

    2011-03-20 10:23 [回复]
  6. 36楼
    hfahe:

    回复 xjtuhw:[e08]

    2011-03-20 10:24 [回复]
  7. 35楼
    jankerli:

    哇,期待你的书啊···[e03]

    2011-03-21 09:49 [回复]
  8. 34楼
    xiahailufei:

    [e01]

    2011-03-22 20:07 [回复]
  9. 33楼
    grui:

    [e01][e01]

    2011-03-22 23:57 [回复]
  10. 32楼
    sd31libin:

    你太有才了,向你学习!

    2011-03-23 09:23 [回复]
  11. 31楼
    yanyinxi:

    书出来了 记着给我通知下: yan_yin_xi@163.com 我要买。[e01][e01][e01]

    2011-03-23 09:26 [回复]
  12. 30楼
    hurry70:

    很期待

    2011-03-23 09:35 [回复]
  13. 29楼
    eduhsd:

    哇。。html5高手[e03]

    2011-03-23 10:25 [回复]
  14. 28楼
    wuhuiyishi:

    [e01]

    2011-03-23 11:05 [回复]
  15. 27楼
    ggggteym:

    历害

    2011-03-23 12:55 [回复]
  16. 26楼
    lijin84100:

    [e01]

    2011-03-23 13:46 [回复]
  17. 25楼
    qq361119908:

    厉害~

    2011-03-23 21:41 [回复]
  18. 24楼
    wjz229449468:

    [e01]

    2011-03-24 00:23 [回复]
  19. 23楼
    hsiaoyang:

    我也要买html5的书啊! 这两个CSS demo无法正常显示呢?firefox4 中

    2011-03-24 09:11 [回复]
  20. 22楼
    qiluchao1016:

    [e01]

    2011-03-24 09:50 [回复]
  21. 21楼
    haopotato:

    [e01]

    2011-03-24 10:48 [回复]
  22. 20楼
    B439984445:

    [e01]一直想自己写一个进度条,不过只是想想。想写一个上传下载文件时表示文件上传下载进度的进度条。。

    2011-03-24 10:50 [回复]
  23. 19楼
    stolid:

    [e01]

    2011-03-24 11:41 [回复]
  24. 18楼
    qlxuelang:

    [e01] 太牛了

    2011-03-24 12:44 [回复]
  25. 17楼
    qlxuelang:

    [e01]

    2011-03-24 12:46 [回复]
  26. 16楼
    ma_beibei:

    太牛了吧 这个很是给力

    2011-03-24 16:50 [回复]
  27. 15楼
    lcszndx:

    看起来好像有个BUG,进度条还没到头,就重新开始了
    还是倾向于简洁的进度条,不占多少资源,速度和效率都是一流

    2011-03-24 20:12 [回复]
  28. [e03]

    2011-03-24 22:51 [回复]
  29. [e01]

    2011-03-25 08:10 [回复]
  30. 12楼
    qingyun0719:

    [e01]

    2011-03-25 08:44 [回复]
  31. 11楼
    noahlu:

    [e03]

    2011-03-25 09:53 [回复]
  32. 10楼
    asia_zhou:

    [e01]

    2011-03-25 10:29 [回复]
  33. 9楼
    lhfeng:

    ie6和firefox4浏览demo异常.所以还要考虑兼容性的问题呀

    2011-03-25 11:38 [回复]
  34. 8楼
    hfahe:

    回复 lhfeng:ie6不支持HTML5,已经是淘汰产品,可以无视。只是一个教程,所以没有针对Webkit内核以外浏览器做兼容,实现兼容不难,而且在CSS3标准统一后,也不存在兼容性问题。

    2011-03-25 11:53 [回复]
  35. [e01]

    2011-03-25 18:31 [回复]
  36. 这个想法真的不错 [e03]

    2011-03-25 19:51 [回复]
  37. 5楼
    yangs2013:

    [e01]
    好有创意啊

    2011-03-26 09:38 [回复]
  38. [e01]

    2011-03-26 13:54 [回复]
  39. 地板
    zhmin323:

    好有创意啊[e01][e01][e01]

    2011-03-26 14:10 [回复]
  40. 板凳
    elfenliedef:

    期待你的书

    2011-04-06 09:16 [回复]
  41. 沙发
    lxhself:

    高!!!

    2012-03-26 21:40 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

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

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

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

赞助商广告

友荐云推荐