PS设计教程网欢迎你!

看看CSS3制作的一些网页演示效果

文章来源于 websbook.com,感谢作者 翻译整理 给我们带来经精彩的文章!
设计教程/前端设计/前端设计2010-02-05
下面这些都是使用CSS3制作的网页动画演示,通过这些内容可以了解CSS3的强大,此外部分动画结合了Javascript脚本来运行。

下面这些都是使用CSS3制作的网页动画演示,通过这些内容可以了解CSS3的强大,此外部分动画结合了Javascript脚本来运行,其中有些演示内容是十分有用的,可以应用在网页制作中,而且大多数演示功能看起来很帅,不过如果要浏览这些演示效果的话可能最好别用IE浏览器(作者原话:))

1.使用jQuery的CSS3时钟

看看CSS3制作的一些网页演示效果

2.模拟时钟

看看CSS3制作的一些网页演示效果

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

看看CSS3制作的一些网页演示效果

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

看看CSS3制作的一些网页演示效果

5. CSS3折叠

看看CSS3制作的一些网页演示效果

6. 自动滚动的视差

看看CSS3制作的一些网页演示效果

7. Isocube

看看CSS3制作的一些网页演示效果

8. 图片画廊

看看CSS3制作的一些网页演示效果

9. 矩阵

看看CSS3制作的一些网页演示效果

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

看看CSS3制作的一些网页演示效果

11. 图片滑过效果

看看CSS3制作的一些网页演示效果

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

看看CSS3制作的一些网页演示效果

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

13. 3D 房间

看看CSS3制作的一些网页演示效果

14. 宝利来画廊

看看CSS3制作的一些网页演示效果

15. 太空

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

看看CSS3制作的一些网页演示效果

16. Mac Dock

看看CSS3制作的一些网页演示效果

17. 滑入的模态窗口

看看CSS3制作的一些网页演示效果

18. 滑动的唱片

看看CSS3制作的一些网页演示效果

19. 放大的宝利来画廊

看看CSS3制作的一些网页演示效果

20. 动画的火箭

看看CSS3制作的一些网页演示效果

21. Poster Circle

这个需要支持3D动画的浏览器才能看到全部效果,比如Mac版Safari4浏览器
看看CSS3制作的一些网页演示效果

22. 变形的盒子

看看CSS3制作的一些网页演示效果

23. 落叶

看看CSS3制作的一些网页演示效果

24. 动画效果宝利来画廊

看看CSS3制作的一些网页演示效果

25. 聚光灯投影

看看CSS3制作的一些网页演示效果

26. 彩色时钟

看看CSS3制作的一些网页演示效果

27. Lightbox 画廊(可拖拽)

看看CSS3制作的一些网页演示效果

28. 弹性所略图菜单

看看CSS3制作的一些网页演示效果

29. Coverflow

看看CSS3制作的一些网页演示效果

30. 雪花

看看CSS3制作的一些网页演示效果

31. jQuery DJ Hero

看看CSS3制作的一些网页演示效果

32. 动态的堆叠卡

看看CSS3制作的一些网页演示效果

33. 另一个图片画廊

看看CSS3制作的一些网页演示效果

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

看看CSS3制作的一些网页演示效果

35. 动画的定价分组

看看CSS3制作的一些网页演示效果

36. 光滑的jQuery菜单

看看CSS3制作的一些网页演示效果

37. CSS3

看看CSS3制作的一些网页演示效果

38. 不用Javascript的CSS Tabs

看看CSS3制作的一些网页演示效果

39. 无JavaScript的Tab菜单

看看CSS3制作的一些网页演示效果

40. SVG Fisheye菜单

看看CSS3制作的一些网页演示效果

41. 无Flash的动态演示

看看CSS3制作的一些网页演示效果

42. 旋转的画廊

看看CSS3制作的一些网页演示效果

43. 下拉菜单

看看CSS3制作的一些网页演示效果

44. 另一个Fisheye效果

看看CSS3制作的一些网页演示效果

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

看看CSS3制作的一些网页演示效果

46. 另一个CSS3折叠

看看CSS3制作的一些网页演示效果

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

看看CSS3制作的一些网页演示效果

注明:本文翻译自国外,转载自前端观察博客,websbook.com重新翻译了下作者原文,可能意思有所偏差,目的就是展示一下CSS3制作的一些网页效果。

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa