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

2016-02-17 04:14 6 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教程,图老师教程网

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

看看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教程,图老师教程网

22. 变形的盒子

看看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教程,图老师教程网

44. 另一个Fisheye效果

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

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

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

46. 另一个CSS3折叠

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

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

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

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

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

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

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

CSS3和Javascript制作图片拖动效果

标签： Web开发

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

一些顶级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; } 第二种看起来的确格...

CSS3教程(1):什么是CSS3

标签： Web开发

CSS3不是新事物，更不是只是围绕border-radius属性实现的圆角。它正耐心的坐在那里，已经准备好了首次登场，呷着咖啡，等着浏览器来铺上红地毯。你看，浏览器需要跟上了注意：浏览器需要改进尽管把玩CSS3是很有趣的事情就像接下来我要演示的几篇教程中表现的那样，但是需要了解的是，CSS3并没有被当前浏览器完全的支持。也就是说，如...

jQuery插件实现css3效果

标签： Web开发

css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果，但是目前支持css3的浏览器少之又少，往往了实现圆角效果要去写一堆代码，下面介绍的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。 1.多重背景 #backgrounds-...

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

标签： Web开发

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

查看更多精彩>>