首页 > IT网络资讯 > 享受强大的HTML5动画效果

享受强大的HTML5动画效果

        文章来源:cnbeta

       先来了解一下HMTL5与当前流行的HTML4的不同之处:

新的解析顺序新的元素:section, video, progress, nav, meter, time, aside, canvasinput元素的新属性:日期和时间,email, url。新的通用属性:ping, charset, async全域属性:id, tabindex, repeat。移除元素:center, font, strike。
HTML 5有两大特点:
首先,强化了Web网页的表现性能。除了可描绘二维图形外,还准备了用于播放视频和音频的标签。
其次,追加了本地数据库等Web应用的功能。


       HTML5 的 Canvas 对象将改变 JavaScript 的使命,使之成为 HTML5 下强大的动画脚本编写工具。本文介绍了 8 个你从未见过的,基于 HTML5 Canvas 和 JavaScript 的动画,这些令人难以置信的效果将使你对 HTML5 彻底折服。需要指出的是,这些都是浏览器的原生动画,无需任何插件。下面是几个国外基于HTML5的动画。


Tunnelers

html5-Tunnelers








纯 JavaScript + HTML5 Canvas 生成的交互动画,难以置信。


The Mesmerizer

html5-the-mesmerizer

在格子中移动鼠标,颜色随着改变并扩散到周围的格子,很迷幻。用鼠标点四角的格子,或按键盘,可以看到更奇妙的效果。


Burn

html5-Burn

在页面上移动鼠标,或按下鼠标,这样的效果,很难相信是浏览器原生的。


Cheloniidae Live

html5-cheloniidae-live

也是基于纯粹的 JavaScript,不过使用了一个 JavaScript 库。很有趣,你可以通过修改其 JavaScript 代码实现自己的效果(可惜被墙了)。


Canvas 3D engine

html5-canvas-3d-engine

一个基于 Canvas 的 3D 引擎。目前只支持预设的图形,纹理及基本交互功能。


Bomomo

html5-Bomomo

很值得一试。


DDD

html5-DDD

这个交互动画也很有趣。


 Plasma Tree

html5-Plasma-Tree

如果你看过《阿凡达》,那么这个动画绝对会让你难忘。


除了这些国外的炫酷动画外,国内也有一个很棒很全面的HTML5体验页面,推荐使用Chrome浏览以获得更好的体验。

html5-cn-demo

转载请尊重版权,出处:秋天博客
本文链接: https://www.cfresh.net/it-web-news/817

  1. 风吟
    风吟 9月 8th, 2010 @ 22:10 | #-31

    不明真相!我完全打酱油的!

    什么js 网络技术 php java 生活日志我一个不懂!

    我只是想对博主问一声!您好!辛苦了

  2. 黄江进口二手车
    黄江进口二手车 9月 4th, 2010 @ 02:04 | #-32

    哔好强大啊,这种速度的优化效果一定很好,msn网好像用这种技术的比较多些

  3. 疯子
    疯子 8月 9th, 2010 @ 18:05 | #-33

    HTML5我喜欢,因为它强大

  4. forece
    forece 7月 16th, 2010 @ 11:49 | #-34

    很好看呢~

  5. 摩凝(M.Chan)
    摩凝(M.Chan) 7月 9th, 2010 @ 15:41 | #-35

    @
    秋天

    我也讨厌,可惜没办法……

  6. 秋天
    秋天 7月 9th, 2010 @ 10:40 | #-36

    @竹纤维
    你的Gravatar头像也很漂亮哦。

    @四代战机
    军迷不一定要了解这么多的,其实我对html语言也不太熟。

    @虾
    别人说我没感觉,但虾一说我真的开始担忧起flash来,因为还想一直一直看虾的漫画和作品。

    @网上赚钱最快的方法
    IE6早就不被这些先进的东西所支持了,包括我当前的博客主题。

    @周先生
    更强大的是真好同学,一会就去看看你们两口子最近有啥动静,哇哈哈。

  7. 秋天
    秋天 7月 9th, 2010 @ 10:36 | #-37

    @Tony
    Tony你,你,你玩啥了?
    /*邪恶的笑*/

    @ptfe
    兄弟联想能力很丰富啊,有一点联系就是他们都很帅。 :mrgreen:

    @万戈
    老万,动感这个词你用的再恰当不过了。

    @lecojason
    下次来你想看到啥?尽管点,只要我能做出来的,哈哈。

    @海天无影
    恩,火狐、Chrome、Opera这些非IE内核的跟HTML5兼容性都比较好。

    @摩凝(M.Chan)
    我讨厌IE6,非常非常讨厌。
    因为用IE6访问这里的话页面卡的很厉害。

    @Elten
    有的一拼啊,如果Flash没有什么发展和突破就很难说了。

    @世纪之光
    我倒觉得flash被淘汰也不定就是坏事,能用html写出来的东西干嘛一定非得还去设计一个flash,而且在浏览器中还得再装flash的插件。
    静观其变,拭目以待吧。

    @购物街
    谢谢,我会回访的。

  8. 周先生
    周先生 7月 7th, 2010 @ 20:57 | #-38

    很久没见秋天了,呵呵,HTML5就是强大!

  9. 网上赚钱最快的方法
    网上赚钱最快的方法 7月 5th, 2010 @ 16:25 | #-39

    太强大了. ie6不能看吧

  10. 笔头
    笔头 7月 5th, 2010 @ 13:49 | #-40

    看上去不错·

  11. 虾
    7月 5th, 2010 @ 11:55 | #-41

    很有趣,只是更担心FLASH的命运会如何。。

  12. 四代战机
    四代战机 7月 5th, 2010 @ 08:05 | #-42

    悲哀,不知道这啥玩意…

  13. 竹纤维
    竹纤维 7月 4th, 2010 @ 00:38 | #-43

    哇,很漂亮啊!

  14. 购物街
    购物街 7月 4th, 2010 @ 00:11 | #-44

    顶一下~~~~~

    欢迎访问我的BLOG:
    http://blog.sina.com.cn/andy4432

  15. 七七
    七七 7月 3rd, 2010 @ 11:31 | #-45

    哈哈,不错,不错。。。

  16. 益酷网
    益酷网 7月 3rd, 2010 @ 08:37 | #-46

    html5更好玩!!看起来真漂亮!

  17. 世纪之光
    世纪之光 7月 2nd, 2010 @ 22:04 | #-47

    这么说以后flash有可能被淘汰了。

  18. Elten
    Elten 7月 2nd, 2010 @ 21:01 | #-48

    html5显得很强大,但是目前来看,是没有办法完全取代flash的,最好的状况就是2者共存

  19. Android Software
    Android Software 7月 2nd, 2010 @ 20:26 | #-49

    很强大的说。

  20. 摩凝(M.Chan)
    摩凝(M.Chan) 7月 2nd, 2010 @ 15:38 | #-50

    玩是好玩的,可惜IE6还是占有很大的市场。

  21. 最好的生日礼物
    最好的生日礼物 7月 2nd, 2010 @ 12:46 | #-51

    嘿嘿。好玩。希望群主多多分享

  22. 淘宝炒股软件排名
    淘宝炒股软件排名 7月 2nd, 2010 @ 12:45 | #-52

    有意思,谢谢分享

  23. 海天无影
    海天无影 7月 2nd, 2010 @ 09:32 | #-53

    火狐 也可以
    好强大啊~

  24. lecojason
    lecojason 7月 2nd, 2010 @ 01:50 | #-54

    有些时间没来秋天的博客,一进来就看见如此强大的HTML5.

  25. 万戈
    万戈 7月 1st, 2010 @ 20:42 | #-55

    只能说太帅了呀,如此有动感,和鼠标还有互动

  26. ptfe
    ptfe 7月 1st, 2010 @ 19:55 | #-56

    HTML5?不懂,知道iphone4

  27. 最有效的祛斑产品
    最有效的祛斑产品 7月 1st, 2010 @ 17:18 | #-57

    很好很强大的HTML5

  28. Tony
    Tony 7月 1st, 2010 @ 15:09 | #-58

    我靠 这么好玩啊!刚才我玩了!哈哈

评论提交中, 请稍候...

留言



注意: 您给他人的评论回复将通过邮件通知到对方。

可以使用的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Trackbacks & Pingbacks ( 0 )
  1. 还没有 trackbacks