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

2016-02-17 04:14 8 1 收藏

今天天气好晴朗处处好风光，好天气好开始，图老师又来和大家分享啦。下面给大家推荐看看CSS3制作的一些网页演示效果，希望大家看完后也有个好心情，快快行动吧！

【 tulaoshi.com - 平面设计】

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

1.使用jQuery的CSS3时钟

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

2.模拟时钟

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

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

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

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

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

5. CSS3折叠

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

6. 自动滚动的视差

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

7. Isocube

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

8. 图片画廊

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

9. 矩阵

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

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

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

11. 图片滑过效果

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

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

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

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

13. 3D 房间

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

14. 宝利来画廊

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

15. 太空

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

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

16. Mac Dock

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

17. 滑入的模态窗口

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

18. 滑动的唱片

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

19. 放大的宝利来画廊

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

20. 动画的火箭

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

21. Poster Circle

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

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

23. 落叶

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

24. 动画效果宝利来画廊

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

25. 聚光灯投影

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

26. 彩色时钟

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

27. Lightbox 画廊(可拖拽)

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

28. 弹性所略图菜单

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

29. Coverflow

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

30. 雪花

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

31. jQuery DJ Hero

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

32. 动态的堆叠卡

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

33. 另一个图片画廊

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

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

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

35. 动画的定价分组

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

36. 光滑的jQuery菜单

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

37. CSS3

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

38. 不用Javascript的CSS Tabs

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

39. 无JavaScript的Tab菜单

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

40. SVG Fisheye菜单

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

41. 无Flash的动态演示

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

42. 旋转的画廊

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

43. 下拉菜单

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

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

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

46. 另一个CSS3折叠

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

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

看看CSS3制作的一些网页演示效果,PS教程,图老师教程网

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

来源:http://www.tulaoshi.com/n/20160217/1578398.html

上一篇： Yahoo前端设计师教你如何设计出优秀的网页
下一篇： 50个经典的网页导航条与按钮设计教程

看过《看看CSS3制作的一些网页演示效果》的人还看了以下文章更多>>

一些顶级CSS技巧

标签： Web开发

Snook.Ca最近给所有的CSSer提出了一些写CSS时候的“顶级技巧”。字体大小使用px 在一行内声明CSS对比下面两个：以下是引用片段： h2{font-size:18px;border:1pxsolidblue;color:#000;background-color:#FFF;} h2{ font-size:18px; border:1pxsolidblue; color:#000; background-color:#FFF; } 第二种看起来的确格...

css学习的一些心得

标签： Web开发

其实去年的时候，我就有过接触css了都是跟着一些网页教程学做的无非是用来控制一下link,vlink之类的那个时候觉得css好像也不过如此，对于层什么那个时候很不屑于顾，因为感觉层定位起来不如表格方便今年十月份的时候，正式开始学习css才发现一些网站不用表格，仍然可以做到非常的好除此之外css还有着对于大流量网站的速度优势到现在为止，断断...

一些有用的CSS资源

标签： Web开发

CSS官方站点 CSS Recommendations http://www.w3.org/TR/REC_CSS1 http://www.w3.org/TR/REC_CSS2 CSS在线中心 w3c CSS Activity page http://www.w3.org/style/css 指向css的规范，思路，以及css的相关站点，有好多有用资料 CSS错误检测站点 w3c CSS Test Suite http://www.w3.org/style/css/test 提供用于测试css实现的相当完整的...

CSS3和Javascript制作图片拖动效果

标签： Web开发

可悲的是，对CSS3和HTML5的不是标准（但）这些天（何时会永远是什么？）。由于此演示使用对CSS3，并不是所有的浏览器都可以全面兼容。正因为如此，它只能作为他们的支持通过- WebKit中字头的变换和箱阴影对CSS3属性仅浏览器在苹果Safari和谷歌浏览器。。所以，现在，这只是为了好玩 – 其它浏览器将显示拍立得，但不会有整洁的阴影，...

CSS设计网页时的一些常用规范

标签： Web开发

CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页眉：header 内容：content 容器：container 页脚：footer 版权：copyright 导航：menu 主导航：mainMenu 子导航：subMenu 标志：Logo...

查看更多精彩>>