DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 收集國外47個令人瞠目結舌的CSS3動畫演示
收集國外47個令人瞠目結舌的CSS3動畫演示
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:或許你已經看過很多關於CSS3動畫的技術,包括前端觀察之前發表的一些,那麼現在就情看一看CSS3動畫的魅力吧。這裡是一輯47個令人瞠目結舌的CSS3動畫演示。他們演示了CSS3能給我們帶來的巨大的可能性。

翻譯自:47 Amazing CSS3 Animation Demos
中文原文:47個驚人的CSS3動畫演示
請尊重版權,轉載請注明來源,多謝!

或許你已經看過很多關於CSS3動畫的技術,包括網頁教學網之前發表的一些,那麼現在就情看一看CSS3動畫的魅力吧。這裡是一輯47個令人瞠目結舌的CSS3動畫演示。他們演示了CSS3能給我們帶來的巨大的可能性。

1.使用jQuery的CSS3時鐘

css3 clock

2.模擬時鐘

analogue clock

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

3d cube

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

multiple 3d cubes

5. CSS3折疊

css3 clock

6. 自動滾動的視差

auto scrolling parallax

7. Isocube

isocube

8. 圖片畫廊

image gallery

9. 矩陣

matrix

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

javascript effect alternatives

11. 圖片滑過效果

css3 clock

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

coke can

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

13. 3D 房間

3d meninas

14. 寶利來畫廊

polaroid gallery

15. 太空

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

space

網頁制作poluoluo文章簡介:或許你已經看過很多關於CSS3動畫的技術,包括前端觀察之前發表的一些,那麼現在就情看一看CSS3動畫的魅力吧。這裡是一輯47個令人瞠目結舌的CSS3動畫演示。他們演示了CSS3能給我們帶來的巨大的可能性。

16. Mac Dock

css3 clock

17. 滑入的模態窗口

drop in modals

18. 滑動的唱片

sliding vinyl

19. 放大的寶利來畫廊

zooming polaroids

20. 動畫的火箭

animated rocket

21. Poster Circle

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

22. 變形的盒子

morphing cubes

23. 落葉

falling leaves

24. 動畫效果寶利來畫廊

polaroid gallery

25. 聚光燈投影

spotlight cast shadow

26. 彩色時鐘

colorful clock

27. Lightbox 畫廊(可拖拽)

css3 clock

28. 彈性所略圖菜單

elastic thumbnail menu

29. Coverflow

coverflow

30. 雪花

snow

網頁制作poluoluo文章簡介:或許你已經看過很多關於CSS3動畫的技術,包括前端觀察之前發表的一些,那麼現在就情看一看CSS3動畫的魅力吧。這裡是一輯47個令人瞠目結舌的CSS3動畫演示。他們演示了CSS3能給我們帶來的巨大的可能性。

31. jQuery DJ Hero

dj hero

32. 動態的堆疊卡

stacking cards

33. 另一個圖片畫廊

image gallery

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

snow stack

35. 動畫的定價分組

animated pricing column

36. 光滑的jQuery菜單

slick jquery menu

37. CSS3

sticky notes

38. 不用Javascript的CSS Tabs

css tabs

39. 無JavaScript的Tab菜單

tab menus

40. SVG Fisheye菜單

fisheye menu

41. 無Flash的動態演示

dynamic presentation

42. 旋轉的畫廊

rotating gallery

43. 下拉菜單

dropdown menu

44. 另一個Fisheye效果

fisheye

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

css3 animation

46. 另一個CSS3折疊

another accordion

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

css3 animation walker

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved