Cyh的博客

          Email:kissyan4916@163.com
          posts - 26, comments - 19, trackbacks - 0, articles - 220

          47個驚人的CSS3動畫演示

          Posted on 2010-08-12 17:33 啥都寫點 閱讀(197) 評論(0)  編輯  收藏

          這里收集了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. 滑入的模態(tài)窗口

          17. 滑入的模態(tài)窗口

          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. 動態(tài)的堆疊卡

          32. 動態(tài)的堆疊卡

          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的動態(tài)演示

          41. 無Flash的動態(tài)演示

          42. 旋轉的畫廊

          42. 旋轉的畫廊

          43. 下拉菜單

          43. 下拉菜單

          44. 另一個Fisheye效果

          44. 另一個Fisheye效果

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

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

          46. 另一個CSS3折疊

          46. 另一個CSS3折疊

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

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

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



                                                                                                                 --    學海無涯
                  

          主站蜘蛛池模板: 花莲市| 方山县| 西盟| 海淀区| 江城| 沙湾县| 宣威市| 桐城市| 鹿泉市| 广南县| 分宜县| 裕民县| 临海市| 红安县| 炉霍县| 安平县| 汤原县| 娄底市| 加查县| 威宁| 阿荣旗| 阳谷县| 茶陵县| 乐安县| 南平市| 南宫市| 徐闻县| 福鼎市| 特克斯县| 云南省| 万安县| 河东区| 射洪县| 河间市| 四会市| 鹤庆县| 玉环县| 咸丰县| 沙坪坝区| 昌吉市| 壶关县|