Posted on 2010-08-12 17:33
啥都寫點(diǎn) 閱讀(196)
評(píng)論(0) 編輯 收藏
這里收集了47個(gè)驚人的CSS動(dòng)畫演示。他們展示了CSS3強(qiáng)大的圖形變換能力。大部分動(dòng)畫
看起來十分簡單又很酷。你只有安裝上webkit瀏覽器（如Safari、Chrome）來觀看他們（暫不支持IE瀏覽器）。
1.使用jQuery的CSS3時(shí)鐘
2.模擬時(shí)鐘
3.使用方向鍵旋轉(zhuǎn)的3D盒子
4.多個(gè)3D盒子(滑入/滑出)
5. CSS3折疊
6. 自動(dòng)滾動(dòng)的視差
7. Isocube
8. 圖片畫廊
9. 矩陣
10. 7個(gè)使用CSS3的Javascript效果替代
11. 圖片滑過效果
12. 轉(zhuǎn)動(dòng)的可樂罐 (通過滾動(dòng)條控制)
PS：這個(gè)例子和下面這個(gè)嚴(yán)格來說都不是用的CSS3技術(shù)，而是復(fù)雜的圖片和css的
background-position屬性的應(yīng)用。
13. 3D 房間
14. 寶利來畫廊
15. 太空
注意: 這個(gè)演示依賴圖形，需要一些時(shí)間來加載，但是結(jié)果非常瘋狂!
16. Mac Dock
17. 滑入的模態(tài)窗口
18. 滑動(dòng)的唱片
19. 放大的寶利來畫廊
20. 動(dòng)畫的火箭
21. Poster Circle
這個(gè)需要支持3D動(dòng)畫的瀏覽器才能看到全部效果，比如Mac版Safari4瀏覽器
22. 變形的盒子
23. 落葉
24. 動(dòng)畫效果寶利來畫廊
25. 聚光燈投影
26. 彩色時(shí)鐘
27. Lightbox 畫廊(可拖拽)
28. 彈性所略圖菜單
29. Coverflow
30. 雪花
31. jQuery DJ Hero
32. 動(dòng)態(tài)的堆疊卡
33. 另一個(gè)圖片畫廊
34. 雪棧 (用方向鍵控制)
35. 動(dòng)畫的定價(jià)分組
36. 光滑的jQuery菜單
37. CSS3
38. 不用Javascript的CSS Tabs
39. 無JavaScript的Tab菜單
40. SVG Fisheye菜單
41. 無Flash的動(dòng)態(tài)演示
42. 旋轉(zhuǎn)的畫廊
43. 下拉菜單
44. 另一個(gè)Fisheye效果
45. 逐幀動(dòng)畫(鼠標(biāo)經(jīng)過時(shí)演示)
46. 另一個(gè)CSS3折疊
47. AT-AT Walker (沒有用Flash或JavaScript)
原文鏈接：http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/
-- 
學(xué)海無涯