現在市面上有一大批H5頁面模板製作工具，誠然，他們方便了很多非專業設計師設計製作H5頁面。但是，很多模板工具上的作品大部分還停留在左飛入右飛出的初級境界，看多了真心有些膩，動效如無美感還不如看靜態的。

那H5裡有哪些高階動效了？小思仔細體驗了國內所有優秀H5頁面作品，整理出下面幾個H5頁面特效。我們的H5作品如果能用上其中一兩個，相信能增色不少！

1、粒子特效

—》》一鍵爆炸

模擬現實中的水、火、霧、氣等效果由各種三維軟體開發的製作模組，原理是將無數的單個粒子組合使其呈現出固定形態，藉由控制器，指令碼來控制其整體或單個的運動，模擬出現真實的效果。作者沒有使用 canvas ，所以無法取到圖片上每個畫素的顏色值。便使用了一些比較討（sha）巧（bi）的方法。構造新圖容器，隱藏原圖—>生成一張張是碎裂小圖—>boom 爆炸！

連結：http://web.jobbole.com/85543/

2.SVG路徑動畫

—》》水滴效果

普通的dom元素，製作圓滑曲線基本是不可能的，根據以往的積累，我們是可以通過svg中的<path>來描繪貝塞爾曲線，達到實現圓滑曲線的效果。所以，採用svg來製作整個類水滴的索引元件是很好的解決辦法。

連結：http://ued.baidu.com/?p=4959

3、序列幀動畫

作品解析：

逐幀動畫類似與電影的播放模式，很適合於表演細膩的動畫。例如：頭髮及衣服的飄動、走路等等。序列幀動畫是隻在時間軸的每幀上逐幀繪製不同的內容，使其連續播放而成動畫。

連結：http://www.epub360.com/search?q=一個字

4.Cinemagraphic

Cinemagraphic是一項將神奇的區域性運動賦予靜態照片的新技術。該應用恰到好處地了詮釋了“自然風”的概念，作為互動者的人們，當看到畫面上被風拂過的Cinemagraphic動態場景，他們也身臨其境地感受到自然風所能帶來的這種清爽感受。

連結：http://cool.levi.com.cn

5.全景

杜蕾斯“美術館”的創新，在於它其實是熱門廣告形式H5頁面的偽裝。“我們想要通過多重手段（比如館內的彩蛋、12 點閉館無法訪問等等）來創造一個虛擬的真實空間，而不是傳統H5的單執行緒教育的邏輯。” Socialab 杜蕾斯組的負責人說，“液體主義群展將是杜蕾斯美術館無數展覽中的第一個。”

6.3D

夜空繁星中題字燈籠飛來飛去的3D炫目效果，祝福燈籠還可以360旋轉呈現，“最飛羊的新春祝願”的主題表現的淋漓精緻。

連結：http://old.vmlim20.com.cn/demo/2015cny/

7.點選碎屏

“擊螢幕”畫面好像很討人喜歡，大概有三輪左右的“擊碎”動作，這是整個H5的互動高峰。另外手機來電也應用到了很多H5的功能上。

連結：http://evt.dianping.com/8809/index.html

8.長按逐字

這個頁面用打字機的形式呈現，觸發逐字等動效很真實，使用者按下按鈕後，紙片會逐漸顯示出韓寒從1999年起的成長軌跡。

連結：http://wx.oneplus.cn/mrx/