給你看一段效果：

寫出這個效果需要多少代碼量呢? 答案是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