HTML5 + CSS3 + JS 演示网站

文章来源: http://developer.51cto.com/art/201112/309731.htm

先看一些有趣的东西。这些网站利用JavaScript将Canvas,WebGL,CSS3和HTML5元素这些浏览器技术融合在了一起。通常这些技术只是用来取悦用户,或是在现代的浏览器中显示一些新的功能。虽然大多数的功能都很不错,但有些会占用大量的处理器或是显卡,所以笔记本电脑用户常常需要关注他们的笔记本温度,以免温度过高而出现异常。

1. Baroque.me

Baroque.me是一个简单,但是能够催眠的网站,它就用到了HTML5 Canvas元素,并使用JavaScript巧妙地控制了一个简单的虚拟巴赫大提琴设备的渲染工作。网站的声音是由Flash提供的,并且使用JavaScript控制。你可以控制页面上那些跳动的圆点,但是却很难控制大提琴的时间节奏。

它的开发者Alexander Chen来自Google Creative Labs,也参与了非常受欢迎的Les Paul Google Doodle开发,在早些时候,还开发了一个非常棒的可视化NY地铁系统。

2. Beercamp

Beercamp 2011的界面非常有趣,可以自由缩放,它非常巧妙地使用了CSS3和JavaScript技术,这一点吸引了许多人的关注。网站大量采用了CSS3转换和变形效果,你还会发现它劫持了浏览器的滚动事件用来控制网页的缩放效果。今年的早些时候David DeSandro曾分享了相关效果实现的技术细节。

3. Three.js

CanvasWebGL这些技术为浏览器带来了强大的渲染功能。Mr. Doob开发的Three.js项目是一个3D JavaScript引擎,能够利用浏览器上的这些新功能渲染页面。下面是一个利用Three.js渲染动画或是3D模型的例子。

4. Windows Phone Demo

最新消息:Web将覆盖移动设备!老实说,这个消息确实对使用JavaScript技术的移动市场来说是一个好消息。这还只是推动移动市场发展的第一步。

为了演示新的Windows移动设备界面,Microsoft开发了一个Windows mobile上的演示示例。用户确实能够发现它的界面播放的动画非常流畅,并且响应相当及时。这也是CSS和JavaScript的功劳(最好是通过iPhone或是Android设备访问——目前还不支持Windows Phone!)。

转载于:https://www.cnblogs.com/caly/archive/2011/12/27/2303533.html

猜你喜欢

转载自blog.csdn.net/weixin_33894640/article/details/93538082