用CSS3製作50個超棒動畫效果教程

CSS3爲我們帶來了令人驚歎的新特性，而最有趣的就是CSS動畫。向大家推薦這50個CSS動畫集合可以讓你通過使用JavaScript函數來讓動畫更生動。爲了能夠預覽到這些驚人的CSS3技術帶來的動畫特效，請大家使用如Safari和Chrome這類基於WebKit內核的瀏覽器。(IE瀏覽器謝絕觀賞~)

1.CSS3實現鐘錶效果(基於jQuery)

　　使用CSS3的基本變形特性:rotate，並結合了jQuery這類javaScript框架製作的CSS3時鐘效果。

2.模擬時鐘

　　模擬時鐘基於過渡webkit和CSS3變形，javascript用於將其按當前時間轉動。

3.可使用箭頭鍵旋轉的3D立方體

　　你可以使用上、下、左、右方向鍵控制這個3D立方體，它是基於webkit-perspective, -webkit-transform 和 -webkit-transition 創建。

4.多種3D立方體(淡入淡出)

　　多種3D立方體使用CSS3和它的屬性‘transform’ 和 ‘transition’ ，我個人覺得效果很震撼，你能看到寫在3D立方體上的透視感極強的文字。

5.CSS3手風琴效果

　　使用CSS3實現的手風琴菜單效果，基於webkit瀏覽器專有屬性。

6.自動滾動視差效果

　　自動滾動視差效果使用WebKit的 CSS transition 屬性。該效果無需JavaScript。

7.Isocube

　　Isocube有些類似於3D立方體，但也有不同之處，它可以讓他片貼在立方體面。

8.CSS3圖片集

9.CSS3 Matrix(黑客帝國效果)

　　黑客帝國是最棒的科幻小說改編電影之一，現在使用純CSS就能實現電影中的矩陣效果。

10.7種CSS3結合javascript技術的特效

　　7種CSS3結合javascript技術的特效實例. 所包含的效果有淡入淡出, 震動, 輕移, 擴大, 跳動, 旋轉 和 手風琴效果。

11.各種鼠標懸停圖片特效

　　六個由CSS3替代JavaScript而實現的鼠標懸停圖片效果，CSS3實現這種懸停效果依然很炫！

12.旋轉的可口可樂易拉罐(使用滾動條控制)

13.3D 《宮女》

14.寶利來畫廊

　　寶利來畫廊是由CSS3技術實現的將一些照片堆在一起，有趣的是鼠標懸停照片是，照片會旋轉並緩慢放大~

15.太空

16.Mac Dock

　　CSS3模擬的mac操作系統菜單…

17.Drop-In Modals

18.滑動的唱片

　　該效果使用了CSS3過渡和些許HTML，在它上面放一個唱片專輯會看上去更生動。

19.CSS3 Zooming Polaroids

　　該效果會將一個照片列表按順序排列，並把它們按不同的角度旋轉，使用了CSS2和CSS3技術，無JavaScript。它從圖片的alt屬性中讀取出照片描述並放到了照片的下方。

20.CSS3 火箭動畫

21.Poster Circle

22.變形的立方體

23.動畫版寶麗來畫廊

24.聚光燈下的投影效果

25.色彩鮮豔的時鐘

26.Lightbox Gallery

27.彈性縮略圖菜單

28.Coverflow

29.jQuery DJ Hero

30.Dynamic Stacking Cards

31.另一個CSS3圖片畫廊效果

32.雪堆(使用方向鍵控制)

33.CSS3動畫版價格欄

34.平滑jQuery+CSS3菜單

35.CSS標籤(無JavaScript)

36.CSS標籤菜單(無JavaScript)

37.SVG+CSS3魚眼菜單

38.CSS3落葉效果

39.CSS3旋轉圖集效果

40.CSS3下拉菜單

41.星球大戰風格爬行文字(純HTML+CSS)

42.CSS3即時貼

43.css3雪花

44.又一個魚眼效果

45.CSS3逐幀動畫

　　第一個CSS3逐幀動畫實例需要你持續使用鼠標點擊圖片，當播放到最後一幀時它會自動播放第一幀，如此循環，但第一個實例只能在FireFox和Opera下實現。第二個Css3逐幀動畫實例需要你使用鼠標在圖片上移動，依舊是mousemove這個動作，只要鼠標在移動圖片動畫就會持續播放，但動畫的播放速度是與你的鼠標移動速度有關的，該實例支持Safari, Google Chrome, IE8, Firefox 和 Opera。

46.全地域裝甲載具

47.又一個CSS3手風琴效果

48.無Flash版動態展示

49.平滑菜單欄

50.loading旋轉效果