HTML5 知识库

用 HTML5 消磨时光

   阅读:705次   评论:38条   更新时间:2010-08-30    

HTML5 渐入佳境,它强大的功能正被逐渐挖掘出来,各种实验性应用层出不穷,本文介绍几个由 Hakim El Hattab 设计的 HTML5 趣味小应用,它们非常有趣,我刚刚在它们身上消磨了两个小时。当你体验完这几个小应用,会发现 HTML5 比你想象的更强大。

Sinuous

在浩瀚的星系间履行,小心装上些红色的星球,绿色的星球可以吃掉,可以增加体能。

开始体验 >>

Bakemono

鼠标在页面空白位置点击,这个小怪物会扑过去。

开始体验>>

Keylight

我太喜欢这个小程序了,在一个空房间,双击鼠标,会放置上一个小球,当放进两个小球的时候,一道粒子束在两个球之间撞击,并发出悦耳的声音,随着小球的增多,粒子束在每个小球之间穿梭撞击,离你越近的小球,声音越清脆,音调越高,这样就形成了连续的音乐。

开始体验>>

Blob

一些果冻样的东西,会滑向你鼠标点击的位置,在果冻球体中间点击,会将它扯成两半,它们在到处滑动的时候,还会再溶合到一起。

开始体验>>

Magnetic

也是我最爱的一个小程序。鼠标在夜空中双击,可以创造一颗恒星,同时创造出十几颗卫星绕着它转,你可以创造很多这样的恒星系,当它们中的某些靠近到一起形成质量比较大的恒星系的时候,可以吸引更多的卫星绕着它们转。

开始体验>>

Trail

五颜六色的彩带,随着鼠标飘动,鼠标不动的时候,便围着鼠标箭头旋转,非常简单,但很流畅,视觉效果很漂亮。

开始体验>>

Particle Depth

很 Cool 的三维效果。

开始体验>>

Wave

水面随着鼠标形成波浪,水面的浮球也随着沉浮,效果非常棒。

开始体验>>

Particles

粒子在屏幕上飘动,遇到鼠标的时候膨胀。

开始体验>>

译者注

这组 HTML5 实验应用加载速度非常慢,初以为是 HTML5 本身性能的问题,研究过源代码才发现,原来页面上调用了 Twitter 的饰件(http://platform.twitter.com/widgets.js),因为世界上压根没有 Twitter,我们早就知道,但这些网页不知道,所以还傻傻地去连接,浪费了大量的时间。使用 Godaddy 的服务器测试,每个页面大约需要 0.2 秒就打开了。有人说,他们代表先进生产力。

 

本文素材来源:http://hakim.se/experiments/


中文编译来源:锐商企业CMS 网站内容管理系统 官方网站

评论 共 38 条 请登录后发表评论
38 楼 ftp51423121 2010-12-02 14:07
you.manshou 写道
icanfly 写道
enica 写道
ariestiger 写道
引用
原来页面上调用了 Twitter 的饰件(http://platform.twitter.com/widgets.js),因为世界上压根没有 Twitter,我们早就知道,但这些网页不知道,所以还傻傻地去连接,浪费了大量的时间。





37 楼 二十一点半 2010-10-03 11:37
太强了吧
36 楼 fengzi2009F 2010-09-18 17:42
好,学些啊
35 楼 shamohai 2010-09-14 20:07
很强大,汉服
34 楼 200cc 2010-09-14 16:25
GJ!NICE BOAT.
33 楼 robinqu 2010-09-13 17:26
safari下这些demo还是很流畅的,cpu也在40%左右,比Flash好很多了~

这些demo是展示的canvas的绘图能力,html5亮点之一
32 楼 KeyRole 2010-09-09 19:39
4还没整明白呢,又来5了
31 楼 ibio 2010-09-08 15:54
这组 HTML5 实验应用加载速度非常慢,初以为是 HTML5 本身性能的问题,研究过源代码才发现,原来页面上调用了 Twitter 的饰件(http://platform.twitter.com/widgets.js),因为世界上压根没有 Twitter,我们早就知道,但这些网页不知道,所以还傻傻地去连接,浪费了大量的时间。使用 Godaddy 的服务器测试,每个页面大约需要 0.2 秒就打开了。有人说,他们代表先进生产力。
30 楼 you.manshou 2010-09-08 11:34
icanfly 写道
enica 写道
ariestiger 写道
引用
原来页面上调用了 Twitter 的饰件(http://platform.twitter.com/widgets.js),因为世界上压根没有 Twitter,我们早就知道,但这些网页不知道,所以还傻傻地去连接,浪费了大量的时间。




29 楼 ruaninho 2010-09-08 08:43
不明白这个跟html5有何关系
28 楼 klovelovely 2010-09-07 18:11
HTML5 的重点不应该是这些花哨的界面特效。
但是他们代表了HTML5所具有的潜力,正如游戏推动计算机硬件的飞速发展一样,同时也为HTML5代替Flash增加了相当的筹码与信心;当然,并没有谁真的代替了谁,HTML5只是一个趋势,我们无法预测将来。
27 楼 gestapo8 2010-09-06 21:02
一个cpu彪到了100%...
26 楼 waiting 2010-09-06 16:33
太酷了~!
25 楼 marina1126 2010-09-06 16:08
很牛的东西哦
24 楼 marina1126 2010-09-06 16:07
确实很牛逼!
23 楼 daxiong921 2010-08-31 14:54
麻烦呀,随便写一个,就要一大堆代码,脑袋都写晕了。。

请问有没有IDE推荐可以,可以直接画出来
22 楼 icanfly 2010-08-31 14:05
enica 写道
ariestiger 写道
引用
原来页面上调用了 Twitter 的饰件(http://platform.twitter.com/widgets.js),因为世界上压根没有 Twitter,我们早就知道,但这些网页不知道,所以还傻傻地去连接,浪费了大量的时间。



21 楼 luoyahu 2010-08-31 12:11
neo 写道
因为世界上压根没有 Twitter,我们早就知道,但这些网页不知道,所以还傻傻地去连接,浪费了大量的时间

精华所在啊
20 楼 wdq 2010-08-31 10:58
  
19 楼 rambosir 2010-08-31 10:11
guoxu1231 写道
有人说,他们代表先进生产力。

没错,它就是先进的生产力
18 楼 lkj107 2010-08-31 09:57
看来副主编最近火气比较大啊,有被肉饼和谐掉的可能,应聘副主编..
17 楼 linux1689 2010-08-31 09:39
请问各位,咱们这里面有没有HTML 5的高手,大家能否推荐几位?
16 楼 huhuanqadn 2010-08-31 08:41
因为世界上压根没有 Twitter,我们早就知道,但这些网页不知道,所以还傻傻地去连接,浪费了大量的时间

15 楼 xifo 2010-08-30 23:00
译者很油墨,最后的注很精彩。
14 楼 Jekey 2010-08-30 22:02
编辑不够严谨啊。
13 楼 javaDevil 2010-08-30 21:53
引用
小心上些红色的星球


又一个错别字
12 楼 high_java 2010-08-30 19:20
Awesome,不错,更想知道的是HTML5在企业应用中能干什么
11 楼 skydream 2010-08-30 16:20
他们还说,他们代表了广大人民的根本利益。

所以,几年前,我就已深刻的明白,原来我已经自绝于人民了。

从此不敢自称人民,我只敢卑微的称呼自己为: P民。


10 楼 enica 2010-08-30 15:21
ariestiger 写道
引用
原来页面上调用了 Twitter 的饰件(http://platform.twitter.com/widgets.js),因为世界上压根没有 Twitter,我们早就知道,但这些网页不知道,所以还傻傻地去连接,浪费了大量的时间。


9 楼 Leon.Wood 2010-08-30 14:55
牛叉11111111111111111

发表评论

您还没有登录,请您登录后再发表评论

Global site tag (gtag.js) - Google Analytics