荐:47个惊人的CSS3动画演示

这里收集了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)

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

译文链接:http://www.iwanna.cn/archives/2010/08/11/4911/

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小禾斗斗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值