玩轉HTML5移動頁面!(動效篇)

發布時間:2017-07-30 12:00 來源:互聯網 當前欄目:網頁設計教程

   (1) CSS3時序錯開漸顯動畫

  這是一種比較常用的動畫,它的優點是節奏感強,做法就是先讓每個元素隱藏,然后當頁面呈現后每個元素錯開時間出現。

  例子(忽略兼容前綴和無關屬性):

玩轉HTML5移動頁面(動效篇) 電腦高手
玩轉HTML5移動頁面(動效篇)

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

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

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

  2.根據識別類采取以下措施:

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

  (2)用css屏蔽掉動畫;

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

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

玩轉HTML5移動頁面(動效篇)
玩轉HTML5移動頁面(動效篇)

  (2) CSS3細節強調動畫

  一些局部細節如果還是漸現顯示,會枯燥沒什么感覺,例如標題、按鈕等,需要一種強調。

  分兩種情況:

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

玩轉HTML5移動頁面(動效篇)
玩轉HTML5移動頁面(動效篇)

搞笑圖片大全[www.62-6.com/1/pic/]
  (查看DEMO)

  2.如果時間緊湊,又不像桑尼一樣擅長于動畫細節,可以使用一些輔助工具:

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

  (3)SVG動畫

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

  先看個生日頁面,是個SVG的蛋糕:

玩轉HTML5移動頁面(動效篇)
玩轉HTML5移動頁面(動效篇)

  (查看DEMO)

  可見SVG是很強大的!彌補了CSS3的不足。

  然而這種動畫也是略耗時,但有一種比較常用的,就是線條的描繪動畫,CSS3比較難實現,這里可以用SVG,看圖:

玩轉HTML5移動頁面(動效篇)
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、