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

1.CSS3實(shí)現(xiàn)鐘表效果(基于jQuery)

　　使用CSS3的基本變形特性:rotate，并結(jié)合了jQuery這類javaScript框架制作的CSS3時(shí)鐘效果。

2.模擬時(shí)鐘

　　模擬時(shí)鐘基于過渡webkit和CSS3變形，javascript用于將其按當(dāng)前時(shí)間轉(zhuǎn)動(dòng)。

3.可使用箭頭鍵旋轉(zhuǎn)的3D立方體

　　你可以使用上、下、左、右方向鍵控制這個(gè)3D立方體，它是基于webkit-perspective, -webkit-transform 和 -webkit-transition 創(chuàng)建。

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

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

5.CSS3手風(fēng)琴效果

　　使用CSS3實(shí)現(xiàn)的手風(fēng)琴菜單效果，基于webkit瀏覽器專有屬性。

6.自動(dòng)滾動(dòng)視差效果

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

7.Isocube

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

8.CSS3圖片集

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

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

10.7種CSS3結(jié)合javascript技術(shù)的特效

　　7種CSS3結(jié)合javascript技術(shù)的特效實(shí)例. 所包含的效果有淡入淡出, 震動(dòng), 輕移, 擴(kuò)大, 跳動(dòng), 旋轉(zhuǎn) 和 手風(fēng)琴效果。

11.各種鼠標(biāo)懸停圖片特效

　　六個(gè)由CSS3替代JavaScript而實(shí)現(xiàn)的鼠標(biāo)懸停圖片效果，CSS3實(shí)現(xiàn)這種懸停效果依然很炫！

12.旋轉(zhuǎn)的可口可樂易拉罐(使用滾動(dòng)條控制)

13.3D 《宮女》

14.寶利來畫廊

　　寶利來畫廊是由CSS3技術(shù)實(shí)現(xiàn)的將一些照片堆在一起，有趣的是鼠標(biāo)懸停照片是，照片會(huì)旋轉(zhuǎn)并緩慢放大~

15.太空

16.Mac Dock

　　CSS3模擬的mac操作系統(tǒng)菜單…

17.Drop-In Modals

18.滑動(dòng)的唱片

　　該效果使用了CSS3過渡和些許HTML，在它上面放一個(gè)唱片專輯會(huì)看上去更生動(dòng)。

19.CSS3 Zooming Polaroids

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

20.CSS3 火箭動(dòng)畫

21.Poster Circle

22.變形的立方體

23.動(dòng)畫版寶麗來畫廊

24.聚光燈下的投影效果

25.色彩鮮艷的時(shí)鐘

26.Lightbox Gallery

27.彈性縮略圖菜單

28.Coverflow

29.jQuery DJ Hero

30.Dynamic Stacking Cards

31.另一個(gè)CSS3圖片畫廊效果

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

33.CSS3動(dòng)畫版價(jià)格欄

34.平滑jQuery CSS3菜單

35.CSS標(biāo)簽(無JavaScript)

36.CSS標(biāo)簽菜單(無JavaScript)

37.SVG CSS3魚眼菜單

38.CSS3落葉效果

39.CSS3旋轉(zhuǎn)圖集效果

40.CSS3下拉菜單

41.星球大戰(zhàn)風(fēng)格爬行文字(純HTML CSS)

42.CSS3即時(shí)貼

43.css3雪花

44.又一個(gè)魚眼效果

45.CSS3逐幀動(dòng)畫

　　第一個(gè)CSS3逐幀動(dòng)畫實(shí)例需要你持續(xù)使用鼠標(biāo)點(diǎn)擊圖片，當(dāng)播放到最后一幀時(shí)它會(huì)自動(dòng)播放第一幀，如此循環(huán)，但第一個(gè)實(shí)例只能在FireFox和Opera下實(shí)現(xiàn)。第二個(gè)Css3逐幀動(dòng)畫實(shí)例需要你使用鼠標(biāo)在圖片上移動(dòng)，依舊是mousemove這個(gè)動(dòng)作，只要鼠標(biāo)在移動(dòng)圖片動(dòng)畫就會(huì)持續(xù)播放，但動(dòng)畫的播放速度是與你的鼠標(biāo)移動(dòng)速度有關(guān)的，該實(shí)例支持Safari, Google Chrome, IE8, Firefox 和 Opera。

46.全地域裝甲載具

47.又一個(gè)CSS3手風(fēng)琴效果

48.無Flash版動(dòng)態(tài)展示

49.平滑菜單欄

50.loading旋轉(zhuǎn)效果

總結(jié)

以上是生活随笔為你收集整理的用CSS3制作50个超棒动画效果教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。