阅读更多

63顶
6踩

Web前端

转载新闻 用 HTML5 消磨时光

2010-08-30 10:21 by 副主编 just_cool 评论(38) 有22643人浏览

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 网站内容管理系统 官方网站

63
6
评论 共 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 写道
有人说,他们代表先进生产力。

没错,它就是先进的生产力

发表评论

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

相关推荐

  • 复制出来的虚拟机加入域提示试图加入域的SID与本计算机的SID相同解决方法

    在虚拟机环境下复制了多个相同的系统的计算机,其中一个计算机加入另一个计算机的域是提示试图加入域的SID与本计算机的SID相同解决方法。 二、解决方法 2.1、找到Sysprep.exe 2.2、打开Sysprep.exe 勾选 ...

  • JavaServer Faces in Action 中关于 action listener 的讲解部分

    当用户和代表命令或某操作(gesture)等控件发生交互的时候,触发 动作事件(action event)。产生动作事件的组件也叫做动作源,包括了按钮、超链接等组件。动作事件由动作监听器(action listener)进行处理。有两种典型的监听器:一种会影响到页面间的导航(navigation),另一种不会影响到导航。影响到页面间导航的监听器主要是处理一些业务逻辑并返回几个业务逻辑结果,JS

  • oracle中sid是什么意思,Oracle中SID的作用

    SID 主要用于区分同一台计算机上的同一个数据库的不同实例.SID 与ORACLE_HOM 一起HASH 出来一个UNIQUE KEY NAME 分配给SGA.ORACLSID 主要用于区分同一台计算机上的同一个数据库的不同实例.SID 与Oracle_HOM 一起HASH...

  • 关于tnsname.ora文件中servers_name与sid的区别?

    在8i以前,使用SID来表示标识数据库的一个实例,但是在Oracle的并行环境中,一个数据库对应多个实例,这样就需要多个网络服务名,设置繁琐。为了方便并行环境中的设置,引进了Service_name参数,该参数对应一个...

  • 《域渗透攻防指南》签名版预售来啦

    国内首本专门讲述域内攻防的书籍《域渗透攻防指南》签名版预售。

  • 怎样更改计算机的sid,关于Windows系统sid修改方法

    关于Windows系统sid修改方法一、Sid的含义Sid全称为security identity,即网络安全标示。它用来唯一标示计算机账户、用户组和用户账户这些信息。他由计算机名、当前时间、当前用户态线程的CPU耗费时间的'总和三个...

  • 无法完成域加入,原因是试图加入的域的SID与本计算机的SID相同

    在VMware虚拟机中完整克隆某一时刻的快照当成一个新的虚拟机使用,在加入域的时候会有“无法完成加域,原因是试图加入的域的SID与本计算机SID相同”,这种情况同样会出现在复制Hyper-V虚拟机的时候。 问题原因: ...

  • 关于TNSNAMES.ORA中SERVICE_NAME,SID的一点理解

    关于TNSNAMES.ORA中SERVICE_NAME,SID的一点理解 SID只指定一个实例,而SERVICE_NAME在RAC环境中指定多个实例。 如下,该配置指定了一个节点的HOST: RAC1 =  (DESCRIPTION =  (ADDRESS_LIST =  (ADDRESS = ...

  • 虚拟机 克隆的多个Windows 重置SID号,方便设置域

    1.第一个虚拟机windows不用重置SID号,从第二个SDCserver开始,把Client, GWsever, Server01后四个系统重置SID号,否则克隆的系统重复的SID会影响域的设置。 开始菜单 打开 windows system 打开命令提示符 command ...

  • Oracle中sid是实例名吗,ORACLE_SID、实例名(SID) 、数据库名区别

    ORACLE_SID、实例名(SID) 、... 数据库名eg:spfilePLMS.ora中的db_name='PLMS'Instance_name=PLMS系统标识符(ORACLE_SID):用于生产进程名和找数据库相应参数(spfilePLMS.ora)的.profile中ORACLE_SID=PLMS实例名(S...

  • Windows server 2012 R2 解决“无法完成域加入,原因是试图加入的域的SID与本计算机的SID相同。”

    Windows server 2012 R2 解决“无法完成域加入,原因是试图加入的域的SID与本计算机的SID相同。” 使用克隆的系统时,加域是出现如下问题。“无法完成域加入,原因是试图加入的域的SID与本计算机的SID相同。” ...

  • oracle中service_name、sid、tablespace、instance_name几个概念的理解

    ORACLE中DB_NAME,DB_DOMAIN,GLOBAL_DBNAME,SERVICE_NAME,ORACLE_SID,INSTANCE_NAME,SCHAME概念。之前对这些概念有接触,但一直没有彻底理解,今天整理并记录。

  • 查看计算机当前用户的sid,查看SID

    SID( Security Identifiers)安全标识符,是标识用户、组和计算机帐户的唯一的号码.在第一次创建该帐户时, 将给网络上的每一个帐户发布一个唯一的 SID。nbsp; //切换到oracle用户oracle@oracle:~>echo $ORACLE_...

  • Spring Security 中如何细化权限粒度?

    不过松哥想说的是,技术都是相通的,明白了 vhr 中权限管理的原理,在此基础上就可以去细化权限管理粒度,细化过程和还是用的 vhr 中用的技术,只不过设计层面重新规划而已。 当然今天我想说的并不是这个话题,主要...

  • 查找用户SID方法

    获取域用户SID:     1:win2008以上的机器         运行adsiedit.msc通过ADSI编辑器查看用户SID,...

  • 【大模型】大语言模型简介

    因此,模型规模增长是必然趋势,当推进大模型规模不断增长的时候,涌现能力的出现会让任务的效果更加出色。...随着模型规模的不断增长,任务效果也持续增长,说明这类任务对大模型中知识蕴涵的数量要求较高。

  • 针对Windows克隆机加入域会出现SID相同问题解决

    修改SID的方法就是: 使用windows 提供的系统准备工具,重新生成新的SID 操作 打开Windows “C:\Windows\System32\sysprep” 的这个位置 双击“sysprep.exe” 打开“系统准备工具” 界面如下 勾选“通用” ...

  • 什么是数据库实例(SID),oracle/mysql

    2、只是一个名字,SID即是INSTANCE_NAME,SERVICE_NAMES主要用在监听器中,service_names是对外的服务名,是服务器端使用的,一个库可以设置多个对外服务名。比如你身份证叫王大锤,这个就是SID,但是对外不同圈子你...

  • Windows中的SID详解

    Windows 2000 中的内部进程将引用帐户的 SID 而不是帐户的用户或组名。如果创建帐户,再删除帐户,然后使用相同的用户名创建另一个帐户,则新帐户将不具有授权给前一个帐户的权力或权限,原因是该帐户具...

  • Windows中的SID是什么

    Windows 2000 中的内部进程将引用帐户的 SID 而不是帐户的用户或组名。如果创建帐户,再删除帐户,然后使用相同的用户名创建另一个帐户,则新帐户将不具有授权给前一个帐户的权力或权限,原因是该帐户具有不同的 SID

Global site tag (gtag.js) - Google Analytics