demo地址:http://www.adanghome.com/js_demo/45/css
操做鍵:asdf 或者 jkl;css3
==================================================函數
這個demo爲了提高性能,不少地方都使用了css3的tranform和animation來實現的,一方面想調用硬件強速,另外一方面想繞過三角函數的使用。但僅管如此,在移動端的表現仍是很慘。好吧,後面儘可能再優化試試吧。。。性能
不少動畫的實現方式我放棄了使用js,放棄了我本身遊戲引擎的MovieClip類,使用的是css3的animation,用到了不少技巧,好比兩種動畫疊加於同一個元素,一個用逐幀,一個用補間,疊加實現效果。又好比經過delay,完成多個動畫原件的時間差,在js層面用很是簡單的代碼就完成了一個比較複雜的動畫效果。css3真心強大。優化
代碼沒有加註釋,因此讀起來可能會稍有點吃力,不過,若是用心去看看某些動畫的實現,應該會讓不少人有些意外。動畫