15个令人震惊的HTML5实验-最新

15个令人震惊的HTML5实验

2011/09/16 · HTML5 · 1
评论 ·
HTML5

注:本文由敏捷翻译 – 翦丹编译自
Sonia Tracy
的博文。如需转载,请参见文后声明。

除非你一直在岩石下生活,否则你不会没听过HTML5。现在几乎到处都有HTML5的身影,这得益于苹果公司前CEO
乔布斯和很多开发人员的推广。Sonia Tracy
收集整理了15个令人振奋的HTML5实验。提示:如果无法查看这些实验,请更新你的浏览器。

  1. Canvas Cycle

艺术家Mark Ferrari 和 编码师 Joseph
Huckaby的共同合作,这是一幅华丽动人的自然风景画,如冬日的森林,海景和山脉。他们看着这美不胜收并具有音效的图片,心旷神怡。如果你想从工作中获得片刻的轻松,这些照片可以瞬间融化你的紧张感。

图片 1

  1. Google Gravity

另一个来自于Mr.Doob的惊人之作,这比第一个的互动少些但是仍然十分棒。它提供了谷歌搜索主页的基本的副本。但是当你点击光标让整个页面开始“下滑”直到底部。谷歌标志作为一个迅速刷新页面的链接,这对那些讨厌谷歌的大公司来说是个很有意思的游戏。

图片 2

  1. Canvas Trees

这是有Kenneth
Jorgenson创制,这可能是唯一一个地方你能够看到这种句子“刷新会有更多美味的树”。正如所说:你可以点击网站,然后它会带你到一个白色的背景。当开始计算程序中有多少分支时,黑色墨水绘制的树开始成长。你可以不断地刷新,只要你愿意。

图片 3

  1. Magnetic

这是另外个有意思又可供你娱乐的小东西。你基本以一对“磁铁”开始,这可以在屏幕上拖动。些许微粒光束围绕着它,如果你移动它可以改变他们的形状。如果你想要更多的磁铁和微粒,只需双击并拖动他们到任意地方。是的,他们都是有关磁铁和微粒。

图片 4

  1. Celebrity Earnings Graph
    名人赚钱图表

想知道一个电视名人每集节目赚多少?这是个很酷的小图能显示成堆的彩条,它们代表每一个特定特定的名人(或像
Charlie Sheen). 这是 Daniel Rapp诸多项目中的一个。

图片 5

  1. Canvas
    Ribbon

Paul Truong
开发了这个有趣的应用,能够让你通过不停地移动在屏幕上绘制多色彩条。它能使形状和设计都十分漂亮。你所需要做的只是在屏幕上拖动。

图片 6

  1. WebGL Water

这还有一个很酷的演示,使用了革命性的WebGL(基于Web的图形库),在谷歌chrome上效果最好。在演示中,你可以荡起水中的涟漪,或拖动球体移动它,然后按某些键盘键设置光线的方向和切换重力,所有的都是见证如何在环境中灵活地移动目标。

图片 7

  1. Chrysaora

另一个由WebGL提供的令人惊异的演示,在这你可以看到一群非常漂亮活泼的水母在水中游动,梦幻般的阳光洒向书面。见证HTML5和WebGL所带来的网络生活,最好用谷歌Chrome浏览。

图片 8

  1. Voxel Rain

Voxel rain
意味着3D多色箱降成一个旋转的大块。这就像展示20世纪90年代的计算机,现在涉及到Web浏览器,利用HTML5的能力,互联网中最明亮的时代不会太远。

图片 9

  1. HTML5
    文本效果

通常我们网页设计师不知道HTML5在Web排版突破上到底能给我们带来多大突破,并给你演示答案,比以往任何时候都跟多!你可以选择见证立体效果、霓虹灯效果,甚至移动的霓虹灯效果,未来的网页排版全在HTML5控制中。

图片 10

  1. 旋转的 HTML5 Logo

我Hold不住了,它旋转、旋转……这很酷。

图片 11

  1. 3D绘图

厌倦了2D基本HTML绘图服务吗?简单地画条线,然后向左或者向右移动,你将会看到你的旋转3D透视图。3D绘图与HTML5的结合不会更复杂。

图片 12

  1. mta.me Conductor

mta.me Conductor
通过涌现的点不断移动形成线,当线相互“碰撞”时给予你灵感,他们会引发一些互动。这些都证明HTML5不仅仅是代码,而是互动,是网页对于用户的真正关心。

图片 13

  1. Doogle
    Gmail

一个有趣的射击类型游戏,但主角是Gmail!就像经典的射击游戏,你获得生命、得分和全能的激光束。可能一个潜在的演示展示HTML5作为游戏的能力小心,Flash。如果还想玩其他HTML5
游戏,这里有10个HTML5游戏网站。

图片 14

  1. W Pilot

这是一个上瘾的游戏,它应该是非法的。严重的是,一旦你登录到他们的服务器,你将要玩几个小时。你基本上是到处乱飞拍摄的东西,同时避免由其他球员出手。它很简单并具有可玩性,允许多玩家操作,现在很受欢迎。

图片 15

 

原文:Sonia
Tracy
翻译:敏捷翻译
翦丹

如需转载,但请注明原文/译文出处、译文超链接和译者等信息,否则视为侵权,谢谢合作!

赞 收藏 1
评论

图片 16

除非你一直在岩石下生活,否则你不会没听过HTML5。现在几乎到处都有HTML5的身影,这得益于苹果公司前CEO
乔布斯和很多开发人员的推广。Sonia Tracy
收集整理了15个令人振奋的HTML5实验。提示:如果无法查看这些实验,请更新你的浏览器。

精选9个值得学习的 HTML5 效果【附源码】,html5源码

  这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web
开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web
开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的Web
应用。

  1. Canvas
    Cycle

超炫 HTML5 粒子效果进度条

  我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack
Rugile 基于 HTML5 Cavnas 编写的进度条效果。看着这么炫的 Loading
效果,即使让我多等一会也无妨:)

源码下载      在线演示

 

艺术家Mark Ferrari 和 编码师 Joseph
Huckaby的共同合作,这是一幅华丽动人的自然风景画,如冬日的森林,海景和山脉。他们看着这美不胜收并具有音效的图片,心旷神怡。如果你想从工作中获得片刻的轻松,这些照片可以瞬间融化你的紧张感。

HTML5 Canvas 模拟可撕裂布料效果

  这是一个模拟可撕裂布料效果的 HTML5 Canvas
应用演示,效果逼真。你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果。

源码下载      在线演示

 

图片 1

SVG 实现一个漂亮的页面预加载效果

  展示如何使用 CSS 动画, SVG
和 JavaScript 创建一个简单的页面预加载效果。对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊。

源码下载      在线演示

 

  1. Google
    Gravity

结合 CSS3 & Canvas 模拟人行走的效果

  HTML5 和 CSS3 技术给 Web
带来了新的利器,点燃了 Web 开发人员的激情。所谓只有想不到,没有做不到,的确如此。下面给大家分享一个结合
CSS3 & Canvas 模拟人行走的动画效果。

源码下载      在线演示

 

另一个来自于Mr.Doob的惊人之作,这比第一个的互动少些但是仍然十分棒。它提供了谷歌搜索主页的基本的副本。但是当你点击光标让整个页面开始“下滑”直到底部。谷歌标志作为一个迅速刷新页面的链接,这对那些讨厌谷歌的大公司来说是个很有意思的游戏。

HTML5 高仿逼真 3D 布料图案效果

  HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas
元素,HTML5 Canvas
提供了通过 JavaScript 绘制图形的方法,非常强大。下面给大家分享一个 HTML5
Canvas 绘制的 3D 布料图案效果。

源码下载      在线演示

 

图片 2

HTML5 模拟现实物理效果

  Ball Pool
是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动。玩法介绍:可以随意拖动圆球、点击页面背景、晃动浏览器、双击页面背景或者按住鼠标左键,有不同的效果,赶紧来体验一下。

 

源码下载     在线演示

 

  1. Canvas
    Trees

HTML5 WebGL 实现逼真的云朵效果

  使用 HTML5 WebGL
实现超逼真的云朵效果。WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示。

源码下载      在线演示

这是有Kenneth
Jorgenson创制,这可能是唯一一个地方你能够看到这种句子“刷新会有更多美味的树”。正如所说:你可以点击网站,然后它会带你到一个白色的背景。当开始计算程序中有多少分支时,黑色墨水绘制的树开始成长。你可以不断地刷新,只要你愿意。

HTML5 制作疯狂的触手 

   这个示例叫疯狂的触手,移动鼠标可以进行涂鸦,点击鼠标可以清除画布。

源码下载      在线演示

 

图片 3

WebGL 实现的水面特效实验

  使用 WebGL
实现的水面特效实验,可放入一张照片,使用鼠标触动水面会有奇特效果。

源码下载      在线演示

 

HTML5 效果【附源码】,html5源码
这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web
开发领域的热点,拥有很多让人期待已…

  1. Magnetic

这是另外个有意思又可供你娱乐的小东西。你基本以一对“磁铁”开始,这可以在屏幕上拖动。些许微粒光束围绕着它,如果你移动它可以改变他们的形状。如果你想要更多的磁铁和微粒,只需双击并拖动他们到任意地方。是的,他们都是有关磁铁和微粒。

图片 4

  1. Celebrity Earnings
    Graph 名人赚钱图表

想知道一个电视名人每集节目赚多少?这是个很酷的小图能显示成堆的彩条,它们代表每一个特定特定的名人(或像
Charlie Sheen). 这是 Daniel Rapp诸多项目中的一个。

图片 5

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图