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

8 十一月

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

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

2. 模擬時鐘

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

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

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

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

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

5. CSS3手風琴效果

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

6. 自動滾動視差效果

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

7. Isocube

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

8. CSS3圖片集

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

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

10. 7種CSS3結合javascript技術的特效

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

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

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

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

CSS3實例

13. 3D 《宮女》

CSS3實例

14. 寶利來畫廊

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

15. 太空

CSS3實例

16. Mac Dock

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

17. Drop-In Modals

CSS3實例

18. 滑動的唱片

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

19. CSS3 Zooming Polaroids

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

20. CSS3火箭動畫

CSS3 火箭動畫

21. Poster Circle

CSS3實例

22. 變形的立方體

CSS3實例

23. 動畫版寶麗來畫廊

CSS3實例

24. 聚光燈下的投影效果

CSS3實例

25. 色彩鮮豔的時鐘

CSS3實例

26. Lightbox Gallery

CSS3實例

27. 彈性縮略圖菜單

彈性縮略圖菜單

28. Coverflow

CSS3實例

29. jQuery DJ Hero

jQuery DJ Hero

30. Dynamic Stacking Cards

CSS3實例

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

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

CSS3實例

33. CSS3動畫版價格欄

CSS3動畫版價格欄

34. 平滑jQuery+CSS3菜單

平滑jQuery+CSS3菜單

35. CSS標籤(無JavaScript)

CSS標籤(無JavaScript)

36. CSS標籤菜單(無JavaScript)

CSS標籤菜單(無JavaScript)

37. SVG+CSS3魚眼菜單

VG+CSS3魚眼菜單

38. CSS3落葉效果

CSS3落葉效果

39. CSS3旋轉圖集效果

CSS3旋轉圖集效果

40. CSS3下拉菜單

CSS3下拉菜單

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

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

42. CSS3即時貼

CSS3即時貼

43. css3雪花

css3雪花

44. 又一個魚眼效果

CSS3實例

45. CSS3逐幀動畫

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

46. ​​全地域裝甲載具

CSS3實例

47. 又一個CSS3手風琴效果

又一個CSS3手風琴效果

48. 無Flash版動態展示

CSS3實例

49. 平滑菜單欄

平滑菜單欄

50. loading旋轉效果

loading旋轉效果

=======================================================

原載: 彬Go ——集前端開發/網頁設計/網站可用性/用戶體驗於一體的趣味互聯網生活
本文鏈接: http://blog.bingo929.com/50-awesome-css3-animations.html

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: