47個驚人的CSS3動畫演示

原文鏈接:http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

譯文鏈接:http://www.iwanna.cn/archives/2010/08/11/4911/

 

這裏收集了47個驚人的CSS動畫演示。他們展示了CSS3強大的圖形變換能力。大部分動畫看起來十分簡單又很酷。你只有安裝上webkit瀏覽器(如Safari、Chrome)來觀看他們(暫不支持IE瀏覽器)。

1.使用jQuery的CSS3時鐘

使用jQuery的CSS3時鐘

2.模擬時鐘

模擬時鐘

3.使用方向鍵旋轉的3D盒子

使用方向鍵旋轉的3D盒子

4.多個3D盒子(滑入/滑出)

多個3D盒子

5. CSS3摺疊

CSS3摺疊

6. 自動滾動的視差

自動滾動的視差

7. Isocube

Isocube

8. 圖片畫廊

圖片畫廊

9. 矩陣

矩陣

10. 7個使用CSS3的Javascript效果替代

7個使用CSS3的Javascript效果替代

11. 圖片滑過效果

圖片滑過效果

12. 轉動的可樂罐 (通過滾動條控制)

轉動的可樂罐 (通過滾動條控制)

PS:這個例子和下面這個嚴格來說都不是用的CSS3技術,而是複雜的圖片和css的background-position屬性的應用。

13. 3D 房間

3D 房間

14. 寶利來畫廊

寶利來畫廊

15. 太空

太空

注意: 這個演示依賴圖形,需要一些時間來加載,但是結果非常瘋狂!

16. Mac Dock

Mac Dock

17. 滑入的模態窗口

17. 滑入的模態窗口

18. 滑動的唱片

18. 滑動的唱片

19. 放大的寶利來畫廊

19. 放大的寶利來畫廊

20. 動畫的火箭

20. 動畫的火箭

21. Poster Circle

21. Poster Circle

這個需要支持3D動畫的瀏覽器才能看到全部效果,比如Mac版Safari4瀏覽器

22. 變形的盒子

22. 變形的盒子

23. 落葉

23. 落葉

24. 動畫效果寶利來畫廊

24. 動畫效果寶利來畫廊

25. 聚光燈投影

25. 聚光燈投影

26. 彩色時鐘

26. 彩色時鐘

27. Lightbox 畫廊(可拖拽)

27. Lightbox 畫廊(可拖拽)

28. 彈性所略圖菜單

28. 彈性所略圖菜單

29. Coverflow

29. Coverflow

30. 雪花

30. 雪花

31. jQuery DJ Hero

31. jQuery DJ Hero

32. 動態的堆疊卡

32. 動態的堆疊卡

33. 另一個圖片畫廊

33. 另一個圖片畫廊

34. 雪棧 (用方向鍵控制)

34. 雪棧 (用方向鍵控制)

35. 動畫的定價分組

35. 動畫的定價分組

36. 光滑的jQuery菜單

36. 光滑的jQuery菜單

37. CSS3

37. CSS3

38. 不用Javascript的CSS Tabs

38. 不用Javascript的CSS Tabs

39. 無JavaScript的Tab菜單

39. 無JavaScript的Tab菜單

40. SVG Fisheye菜單

40. SVG Fisheye菜單

41. 無Flash的動態演示

41. 無Flash的動態演示

42. 旋轉的畫廊

42. 旋轉的畫廊

43. 下拉菜單

43. 下拉菜單

44. 另一個Fisheye效果

44. 另一個Fisheye效果

45. 逐幀動畫(鼠標經過時演示)

45. 逐幀動畫(鼠標經過時演示)

46. 另一個CSS3摺疊

46. 另一個CSS3摺疊

47. AT-AT Walker (沒有用Flash或JavaScript)

47. AT-AT Walker (沒有用Flash或JavaScript)

 

發佈了3 篇原創文章 · 獲贊 6 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章