登录表单的案例，在w3cplus上已经有很多个，但我们一直没有放下这一块的效果制作，虽然结构与制作方法是类似的，但有很多效果实现的技巧还是略有差别，因为我们有一个目标，希望这上面展示的案例效果，能直接拿到项目中使用，另外一件事就是帮助有需要的同学在工作闲空时间学习CSS3的各种知识以及实战经验，来回馈广大前端人员一直对w3cplus的大力支持，希望大家喜欢。

这个案例是一个登录后个人信息控制面板，包含了个人用户头像，整个信息面板以及一个退出按钮。其中最有特色的是信息面板的下拉菜单使用CSS3的animation、transform制作了一个动感十强的效果。

CSS3控制图片全屏显示，或者说使用CSS3制作全屏背景不是一个很大的问题，前面也有做过一定的讨论，但使用CSS3制作一个全屏slider效果，我想对于一部分同学来说还是有一定的难度。不过话说回来，如果你掌握了CSS3的属性，比如说：CSS3的选择器、animation、transition等等，制作这样的一个效果就会轻松的很，不信你试试。

今天把《CSS3制作超酷的SearchBox》教程中的案例整理了一下，把教程中的DEMO单独拿出来与大家分享。这个DEMO中一共制作了四个不同的搜索表单的效果，希望大家喜欢。

这个例子的效果其实很早就分享了，可能有很多同学不知道这个网址，当初是想做一个纯CSS3案例分享的网站，但由于时间和精力有限，最终胎死腹中，还好，在w3cplus主站上开了这样一个专栏，那些效果又可以面世了，今天开始抽空将把以前那些自认为还可以一看的demo效果移上来。今天转移过来的是第一个案例效果，共享按钮的提示效果，这个效果结构和样式都略有一定的难度，在学习这个属性之前最好先了解一下CSS3的animation,transform等属性的使用方法。感兴趣的继续往下吧。

这个效果是没有任何设计图，也没有任何参照样版，藤藤从设计到效果一线完成。使用了CSS3的animation、transform、transition制作了一个动画导航效果，其中利用了Ligature Icon UI制作了导航中的ICON图标。当然还使用了CSS3的其他属性，比如说圆角属性制作了一个圆形，使用opacity控制菜单的动效果效果，最明显的效果是鼠标悬浮时会放大当前菜单项，怎么实现的，你知道？我想你知道的，要是不知道就继续往下看吧。

CSS3制作秒表效果，以前想都不敢想，但thecodeplayer.com却完美的使用了CSS3中的animation属性制作了一个纯CSS3的秒表计时器的效果，让我们想都不敢想象，曾经需要javaScript的效果，如今使用CSS3的几个属性就完成了。在这个效果中主要是控制时间数字的显示，本例中每个数定的宽度和高度都定死了，其动画实现主要逻辑是通过对数字进行绝对定位，依靠改变数字的“top”属性值来实现时间数字的变更，当关还需要大家计算好他们之间转换的速率。所以说这个例子绝对是一个练习CSS3的animation属性的好例子，你要是掌握了这个例子，我想你对animation会有一个质的认识，希望大家喜欢（^_^）。

这是一个很简单的案例，不过效果很有创意，一个标题“w3cplus”，默认只显示一个字母“w”，但当你的鼠标悬浮到这个标题上时，整个“w3cplus”会动态的给你展开，其实这个效果很类似于Letteringjs的效果，整个效果中letter-spacing属性的运用非常关键，然后配上CSS3的transition和opacity属性。

这个效果是一个类似于彩带的导航菜单效果，整个效果之中，使用的方法都比较简单，关键之处就是如何实现导航菜单两边折角的效果。常用的方法就是“:after”和“:before”生成折角部分，如果你以前从没接触过这种彩带效果制作，不仿先看看《Pure CSS3 Ribbons》以及《CSS3 Ribbons》、《CSS制作图形速查表》、《纯CSS制作的图形效果》几篇教程，能更好的帮助你学习这个案例的制作原理与方法。不过本案例中有一个最不好的地方，就是定死了菜单项的宽度，不能做到收缩自如，所以您要是有兴趣可以在此基础上进行改良。与我们分享。

这个案例主要展示的是使用CSS3实现一个购物车清单下拉列表的效果，在整个效果制作过程中没有过多的技术难题，主要一点是使用什么方法来实现下拉列表的隐藏与显示效果，在本例中还是通过max-height来实现的，至于其他的效果，我想大家要是一路跟着藤藤走下来了的话都非常熟悉了，如果你没有跟着练习也不用害怕，这些效果无外呼包括了gradient制作渐变、box-shadow制作阴影，@font-face实现icon等等。