给你看一段效果：

写出这个效果需要多少代码量呢? 答案是200行。

你没看错， 这是纯HTML5页面，用JS编写的。

这是效果地址。

http://www.thingjs.com/demos/menu.html?name=earthCreateBuilding

这个特效非常消耗CPU，电脑性能以及网速不好的就别尝试了，会非常卡。

实际上它使用了一个叫做ThingJS的框架。 当然这个框架也是纯JS。应用在网页上的。

除了刚才看到的效果，还有像这样的夜景图

http://www.thingjs.com/guide/sampleindex.html?name=/uploads/wechat/oLX7p01p-lBQeR49wRF5j_ox3X3U/HangzhouCityBuilder.js

超逼真的3D模型，加载的时候能看到整个渲染过程，非常有趣。

点击右边的菜单，可以进入室内查看

还可以把每个楼层展开查看

简直玩的不亦乐乎~~~， 下面是地址

http://www.thingjs.com/demos/menu.html?name=uBuilding

除了这些，还有好多特效案例，你可以去官网自己慢慢看。

这个是我目前见到的最惊艳的HTML5的demo。

切图公司一个项目中碰到一个类似苹果手机上SIRI 机器人的项目制作，所以首先想到的是html5 有个audio标签，于是找到了一个有用的demo。

最后项目顺利完成。附demo

http://developer.qietu.com/html/f3/html5audio/

---

关注我们，我们将附送我们工作中的非常多的实用的demo。

ad~

只教web前端实战的切图学院（qietu.org）

用sketch预先设计好UI界面

要想成为真正的全栈开发者，自己会设计那是必不可少

sketch工具

切图片导入hype编码

实现方式：

无聊花了半天做的，其实就是拿一个<audio>实现的，把audio给隐藏了..然后获取播放进度，切歌就是替换audio的src路径，<audio>标签有很多api足以自己动手做一个播放器了，无需第三方库，用到了jQuery，不过这个只是个demo做着玩儿的，还有些功能没写了。

在线预览地址

http://show.lslbk.cn/html5/musicApp/musicApp.html

源码demo下载地址：

http://myblog-1253111993.cosgz.myqcloud.com/file/musicAppH5.zip