5秒钟免费注册 |登录

设计大巴 › 论坛 › XHTML/DIV & CSS › 查看主题

206 查看	15 回复

Rank: 8 Rank: 8

积分: 65306
UID: 100218

go

47个效果惊人的CSS3动画演示

楼主

发表于 2010-6-20 05:50 | 只看该作者 | 倒序看帖 | 打印

　　

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

　　1.使用jQuery的CSS3时钟

　　

图片来自网络

　　2.模拟时钟

　　

图片来自网络

　　3.使用方向键旋转的3D盒子

　　

图片来自网络

本主题由 afanmi 于 2010-6-20 07:31 鉴定为精华

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

沙发

发表于 2010-6-20 05:50 | 只看该作者

　　

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

　　

图片来自网络

　　5. CSS3折叠

　　

图片来自网络

　　6. 自动滚动的视差

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

板凳

发表于 2010-6-20 05:51 | 只看该作者

　　

　　7. Isocube

　　

图片来自网络

　　8. 图片画廊

　　

图片来自网络

　　9. 矩阵

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

木地板

发表于 2010-6-20 05:52 | 只看该作者

　　

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

　　

图片来自网络

　　11. 图片滑过效果

　　

图片来自网络

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

　　

图片来自网络

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

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

5楼

发表于 2010-6-20 05:52 | 只看该作者

　　

　　13. 3D 房间

　　

图片来自网络

　　14. 宝利来画廊

　　

图片来自网络

　　15. 太空

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

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

6楼

发表于 2010-6-20 05:52 | 只看该作者

　　

　　16. Mac Dock

　　

图片来自网络

　　17. 滑入的模态窗口

　　

图片来自网络

　　18. 滑动的唱片

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

7楼

发表于 2010-6-20 05:53 | 只看该作者

　　

　　19. 放大的宝利来画廊

　　

图片来自网络

　　20. 动画的火箭

　　

图片来自网络

　　21. Poster Circle

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

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

8楼

发表于 2010-6-20 05:53 | 只看该作者

　　

　　22. 变形的盒子

　　

图片来自网络

　　23. 落叶

　　

图片来自网络

　　24. 动画效果宝利来画廊

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

9楼

发表于 2010-6-20 05:54 | 只看该作者

　　

　　25. 聚光灯投影

　　

图片来自网络

　　26. 彩色时钟

　　

图片来自网络

　　27. Lightbox 画廊(可拖拽)

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

10楼

发表于 2010-6-20 05:54 | 只看该作者

　　

　　28. 弹性所略图菜单

　　

图片来自网络

　　29. Coverflow

　　

图片来自网络

　　30. 雪花

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

11楼

发表于 2010-6-20 05:55 | 只看该作者

　　

　　31. jQuery DJ Hero

　　

图片来自网络

　　32. 动态的堆叠卡

　　

图片来自网络

　　33. 另一个图片画廊

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

12楼

发表于 2010-6-20 05:55 | 只看该作者

　　

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

　　

图片来自网络

　　35. 动画的定价分组

　　

图片来自网络

　　36. 光滑的jQuery菜单

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

13楼

发表于 2010-6-20 05:56 | 只看该作者

　　

　　37. CSS3

　　

图片来自网络

　　38. 不用Javascript的CSS Tabs

　　

图片来自网络

　　39. 无JavaScript的Tab菜单

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

14楼

发表于 2010-6-20 05:56 | 只看该作者

　　

　　40. SVG Fisheye菜单

　　

图片来自网络

　　41. 无Flash的动态演示

　　

图片来自网络

　　42. 旋转的画廊

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

15楼

发表于 2010-6-20 05:57 | 只看该作者

　　

　　43. 下拉菜单

　　

图片来自网络

　　44. 另一个Fisheye效果

　　

图片来自网络

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

　　

图片来自网络

努力，2010！

Rank: 8 Rank: 8

积分: 65306
UID: 100218

16楼

发表于 2010-6-20 05:57 | 只看该作者

　　

　　46. 另一个CSS3折叠

　　

图片来自网络

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

　　

图片来自网络

努力，2010！

‹ 上一主题|下一主题 ›

设计大巴 ( 沪ICP备09009478号)|联系我们 - 阿凡米
设计大巴工作室专业网站建设 / 热线：021-51691960 / 传真：021-51686556

GMT+8, 2010-9-11 00:18.

Powered by Discuz! X1

© 2001-2010 Comsenz Inc.