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

Canvas和WebGL这些技术为浏览器带来了强大的渲染功能。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!)。