實現CSS3炫酷的效果可以藉助哪些工具

要了解CSS3首先要了解各種瀏覽器對CSS3支持的情況及目前瀏覽器的市場佔有率情況。

其中，除IE7/8以外均不同程度的支持CSS3，越高版本瀏覽器對CSS3支持越好，webkit內核的Chrome瀏覽器支持相比最佳。

隨著IE6/7漸漸退出歷史舞台，谷歌瀏覽器及雙核瀏覽器成為主流，其實QQ及搜狗高速瀏覽器這種雙核瀏覽器普遍為一個是IE內核，一個是webkit內核，Chrome瀏覽器、Safari瀏覽器均是這個內核，而IE內核的版本一般是與系統內的IE瀏覽器內核版本一致。

既然硬性條件已經基本可以滿足，那CSS3大展身手就順理成章了，今天我們就來講講實現CSS3炫酷的效果可以藉助哪些工具。

GIF/207K

如上圖，圖中既有星球旋轉的效果，還有隕石划過且自轉的運動效果，其中隕石效果最為複雜，這麼說吧光代碼就6000多行，如下圖：

雖然是沒壓縮，但是複雜程度一看便知，如果叫我們寫簡直是不可能完成的任務，而藉助工具的話就簡單、高效許多，這個時候就需要借力而行。

第一個要介紹的工具就是「Stylie」，一個有趣的網路動畫工具，可以隨意加入節點，設置動畫時間，旋轉等等特效，而且是自動生成代碼，複製粘貼就可以使用，如圖：

PS：效果複雜的話建議將代碼單獨創建一個CSS文件，放在頁面最下方引用，這樣可以加快頁面展示。

大家看到這個動畫效果的時候會不會有恍然大悟的感覺，其實這個效果我們應該不止一次的用到過，想不起來可以看下面的圖示。

沒錯！這個就是著名的CSS3預設動畫庫「Animate.css」中的swing效果，只需要將常見的效果加上小小的創意就可以實現更加炫酷的效果，更何況這是一個集合了75種效果的動畫庫。

條條大路通羅馬，要實現所謂炫酷的效果一定要學會藉助各種優秀的工具，那麼上面的兩個「神器」已經交給你了，如何使用、發揮、創造出更多創意的動畫就看你咯！

GIF/461K

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！