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

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

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/

译文链接:http://www.comsharp.com/GetKnowledge/zh-CN/TeamBlogTimothyPage_K1013.aspx

目录
相关文章
|
1月前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
35 3
|
2月前
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
74 1
|
2月前
|
移动开发 前端开发 JavaScript
HTML5 新的 Input可以有哪些好玩的应用
HTML5的新输入类型为应用带来了多种创新和互动功能,显著提升了用户体验和界面趣味性。例如,颜色选择器可动态改变网站主题色;滑块控制适用于音量或亮度调节;日期和时间输入便于预约系统的设计;互动式表单结合多种输入类型实现高效的数据收集;猜数字游戏增加用户参与度;实时搜索建议优化网站搜索功能;图像预览功能让用户上传图片前预览效果;密码可见性切换按钮提升表单的可用性;结合用户位置的电话号码输入则能提供附近服务信息。这些应用场景不仅使网站更具吸引力,还增强了用户的互动体验。
|
3月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。
|
3月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `<canvas>` 元素,并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本,以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
|
4月前
|
前端开发
酷炫表单,触感未来:HTML与CSS动画的创新应用!
酷炫表单,触感未来:HTML与CSS动画的创新应用!
|
4月前
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
68 1
|
4月前
|
存储 移动开发 开发者
|
4月前
|
自然语言处理 前端开发 开发者
|
7月前
|
设计模式 前端开发 Java
Java与HTML的深度融合:技术解析与应用实践
Java与HTML的深度融合:技术解析与应用实践
441 1