找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1946|回复: 0
打印 上一主题 下一主题

趣味小应用:用HTML5消磨时光

[复制链接]

2536

主题

2536

帖子

7532

积分

论坛元老

Rank: 8Rank: 8

积分
7532
跳转到指定楼层
楼主
发表于 2018-2-18 04:49:00 | 只看该作者 回帖奖励 |正序浏览 |阅读模式

                      HTML5渐入佳境,它强大的功能正被逐渐挖掘出来,各种实验性应用层出不穷,本文介绍几个由Hakim El Hattab设计的HTML5趣味小应用,它们非常有趣,我刚刚在它们身上消磨了两个小时。当你体验完这几个小应用,会发现HTML5比你想象的更强大。
    Sinuous
600)makesmallpic(this,600,1800);' src="http://www.mycodes.net/upload_files/article/139/201008/1_whzok__39788941.jpg" width="320" height="160" />
    在浩瀚的星系间履行,小心装上些红色的星球,绿色的星球可以吃掉,可以增加体能。
   
[color=]开始体验 >>

    Bakemono
600)makesmallpic(this,600,1800);' src="http://www.mycodes.net/upload_files/article/139/201008/1_uegi0__39788939.jpg" width="320" height="160" />
鼠标在页面空白位置点击,这个小怪物会扑过去。
   
[color=]开始体验>>

    Keylight
600)makesmallpic(this,600,1800);' src="http://www.mycodes.net/upload_files/article/139/201008/1_nhpz4__39788940.jpg" width="320" height="160" />
    我太喜欢这个小程序了,在一个空房间,双击鼠标,会放置上一个小球,当放进两个小球的时候,一道粒子束在两个球之间撞击,并发出悦耳的声音,随着小 球的增多,粒子束在每个小球之间穿梭撞击,离你越近的小球,声音越清脆,音调越高,这样就形成了连续的音乐。
   
[color=]开始体验>>

    Blob
600)makesmallpic(this,600,1800);' src="http://www.mycodes.net/upload_files/article/139/201008/1_dxzuf__39788938.jpg" width="320" height="160" />
    一些果冻样的东西,会滑向你鼠标点击的位置,在果冻球体中间点击,会将它扯成两半,它们在到处滑动的时候,还会再溶合到一起。
   
[color=]开始体验>>

    Magnetic
600)makesmallpic(this,600,1800);' src="http://www.mycodes.net/upload_files/article/139/201008/1_cusva__39788933.jpg" width="320" height="160" />
    也是我最爱的一个小程序。鼠标在夜空中双击,可以创造一颗恒星,同时创造出十几颗卫星绕着它转,你可以创造很多这样的恒星系,当它们中的某些靠近到 一起形成质量比较大的恒星系的时候,可以吸引更多的卫星绕着它们转。
   
[color=]开始体验>>

    Trail
600)makesmallpic(this,600,1800);' src="http://www.mycodes.net/upload_files/article/139/201008/1_c9vxk__39788937.jpg" width="320" height="160" />
    五颜六色的彩带,随着鼠标飘动,鼠标不动的时候,便围着鼠标箭头旋转,非常简单,但很流畅,视觉效果很漂亮。
   
[color=]开始体验>>

    Particle Depth
600)makesmallpic(this,600,1800);' src="http://www.mycodes.net/upload_files/article/139/201008/1_5ahro__39788934.jpg" width="320" height="160" />
很 Cool 的三维效果。
   
[color=]开始体验>>

    Wave
600)makesmallpic(this,600,1800);' src="http://www.mycodes.net/upload_files/article/139/201008/1_ijq09__39788936.jpg" width="320" height="160" />
水面随着鼠标形成波浪,水面的浮球也随着沉浮,效果非常棒。
   
[color=]开始体验>>

    Particles
600)makesmallpic(this,600,1800);' src="http://www.mycodes.net/upload_files/article/139/201008/1_y0ies__39788935.jpg" width="320" height="160" />
粒子在屏幕上飘动,遇到鼠标的时候膨胀。
   
[color=]开始体验>>

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

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

用户反馈
客户端