四月份最有技術(shù)含量的干貨!今天騰訊前端TQ同學(xué)來來談?wù)勔恍﹦赢嬙O(shè)計的小技巧，能幫你在短時間沒動畫靈感時瞬間讓頁面增色，同時也會談及移動端H5頁面的優(yōu)化細節(jié)與關(guān)鍵點 >>>

　　作為一名前端，在拿到設(shè)計稿時你有兩種選擇：

　　1.快速輸出靜態(tài)頁面

　　2.加上高級大氣上檔次狂拽炫酷屌炸天的動畫讓頁面動起來

　　作為一個有志向的前端，當(dāng)然是選2啦!可是需求時間又很短很短，怎么辦呢?

　　這次就來談?wù)勔恍﹦赢嬙O(shè)計的小技巧，能在你時間不多又沒有動畫想法的時候瞬間讓頁面增色不少。

　　同時也會談及移動端H5頁面的優(yōu)化細節(jié)與關(guān)鍵點，因此本文章將分為動效篇和優(yōu)化篇。

　　（1） CSS3時序錯開漸顯動畫

　　這是一種比較常用的動畫，它的優(yōu)點是節(jié)奏感強，做法就是先讓每個元素隱藏，然后當(dāng)頁面呈現(xiàn)后每個元素錯開時間出現(xiàn)。

　　例子(忽略兼容前綴和無關(guān)屬性)：

　　效果就是兩個元素分別從上面掉下來，這里有個小細節(jié)(keyframes)，為了讓掉下來的動畫生動點，應(yīng)該是在90%的時候先掉下一點點，然后瞬間在100%時回跳5px。

　　還有個細節(jié)，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是漸變動畫不能停止在最后一幀。有這樣一個解決方案：

　　1.用Modernizr去檢測是否支持這個屬性，加上識別類.no-animation-fill-mode;

　　2.根據(jù)識別類采取以下

歌名網(wǎng)名[www.la240.com/html2017/1/13/]措施：

　　(1)用js模擬同樣效果;

　　(2)用css屏蔽掉動畫;

　　(3)或者直接全部都用transition來做(不要keyframes)。

　　示例頁面如下(查看DEMO)：

　　（2） CSS3細節(jié)強調(diào)動畫

　　一些局部細節(jié)如果還是漸現(xiàn)顯示，會枯燥沒什么感覺，例如標(biāo)題、按鈕等，需要一種強調(diào)。

　　分兩種情況：

　　1.如果時間允許的話，基本做法是先把一個元素切成不同的塊狀，例如小人的手腳都切成不同圖片，然后讓它們重新組合，再通過賦予不同的CSS動畫來讓它生動起來，這里引用個webank的例子：

　　(查看DEMO)

　　2.如果時間緊湊，又不像桑尼一樣擅長于動畫細節(jié)，可以使用一些輔助工具：

　　Animate.css，通過直接預(yù)覽選擇想要的動效，然后下載它的CSS把對應(yīng)的keyframe扒下來就好了(引用整個CSS是資源浪費)。

　　（3）SVG動畫

　　SVG技術(shù)越來越不陌生，使用門檻也漸漸降低，而且SVG動畫還可以使用CSS控制。

　　先看個生日頁面，是個SVG的蛋糕：

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。