44个惊人的超炫CSS3动画演示

开发 前端
或许你已经看过很多关于CSS3动画的技术,包括前端观察之前发表的一些,那么现在就请看一看CSS3动画的魅力吧。这里是一辑47个令人瞠目结舌的CSS3动画演示。他们演示了CSS3能给我们带来的巨大的可能性。

1.​​使用jQuery的CSS3时钟​

 

 

2.​​模拟时钟​

 

 

 

3. ​​另一个CSS3折叠​

 

 

 

 

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

 

 

5. ​​CSS3折叠​

 

 

 

#p#

 

6. ​​自动滚动的视差​

 

 

7. ​​Isocube​

 

 

8.​​图片画廊​

 

9. ​​矩阵​

 

 

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

 

 

#p#

11. ​​图片滑过效果​

 

 

12. ​​转动的可乐罐 (通过滚动条控制)​

 

 

PS:这个例子和下面这个严格来说都不是用的CSS3技术,而是复杂的图片和css的background-position属性的应用。

13.​​3D 房间​

 

 

14.​​宝利来画廊​

 

 

15. ​​太空​

注意: 这个演示依赖图形,需要一些时间来加载,但是结果非常疯狂!

 

 

#p#

16. ​​Mac Dock​

 

 

17. ​​滑入的模态窗口​

 

 

18. ​​滑动的唱片​

 

 

19. ​​放大的宝利来画廊​

 

 

20. ​​动画的火箭​

 

 

#p#

21. ​​Poster Circle​

这个需要支持3D动画的浏览器才能看到全部效果,比如Mac版Safari4浏览器

 

 

22. ​​变形的盒子​

 

 

23. ​​落叶​

 

 

24. ​​动画效果宝利来画廊​

 

 

25. ​​聚光灯投影​

 

 

 

#p#

 

26. ​​彩色时钟​

 

 

27. ​​Lightbox 画廊(可拖拽)​

 

 

28. ​​弹性所略图菜单​

 

 

29. ​​Coverflow​

 

 

 

30. ​​另一个Fisheye效果​

 

 

 

#p#

 

 

 

31.​​jQuery DJ Hero​

 

 

32. ​​动态的堆叠卡​

 

 

33. ​​另一个图片画廊​

 

 

34. ​​雪栈 (用方向键控制)​

 

 

35. ​​动画的定价分组​

 

 

 

#p#

 

36. ​​光滑的jQuery菜单​

 

 

37. ​​CSS3​

 

 

38. ​​不用Javascript的CSS Tabs​

 

 

39. ​​无JavaScript的Tab菜单​

 

 

 

40. ​​逐帧动画(鼠标经过时演示)​

 

 

 

 

 

 

41.​​无Flash的动态演示​

 

42. ​​旋转的画廊​

 

 

43. ​​下拉菜单​

 

 

 

 

 

 

 

翻译自:​​47 Amazing CSS3 Animation Demos​

文章来源:​前端观察​

责任编辑:陈贻新 来源: 前端观察
相关推荐

2015-12-01 09:52:03

CSS3动画源码

2012-02-24 09:11:45

jQuery

2017-05-11 15:20:52

CSS3动画前端

2012-09-13 09:24:31

CSSJSjQ

2012-02-29 15:46:48

HTML 5

2017-03-06 16:45:36

Linux命令动画演示

2013-12-23 11:01:14

命令Linux命令

2021-06-09 08:30:52

CSS33D旋转视图3D动画

2011-11-11 10:01:37

HTML 5

2012-03-02 10:50:20

jQuery

2021-01-05 08:10:00

Css前端3D旋转透视

2014-04-29 10:39:27

CSS3JavaScript

2012-06-14 13:22:35

JavaScript

2011-03-09 09:25:12

CSS3

2015-10-14 09:50:11

css3动画模拟

2022-07-08 09:55:54

CSS转场动画

2011-04-18 17:17:45

CSSweb开发

2021-09-08 22:28:13

前端Css3动画

2020-12-24 07:02:07

CSS框架

2022-02-20 14:45:33

3D动画CSS3前端
点赞
收藏

51CTO技术栈公众号