这是一个使用CSS3中的transition和transform两个属性制作的一个动画下拉菜单效果，整个效果未采用任何js脚本代码，其中下接的折叠效果是通过transform的rotate来实现的，而transition是用来控制动画更具线性，当然这个效果也用到了transform的3d旋转属性，感兴趣的可以围观一下。扩大你自己的视野。

早期制作手风琴菜单都需要依赖于js的脚本来实现，自从CSS3出现后，制作这种效果不在需要依赖于任何脚本。另外实现手风琴效果的制作方法有很多种，但较为常见的是使用css3的“:target”选择器来实现。在本例中也是一样的，通过“:target”选择器来控制下接菜单的“max-height”，原理简单，方法也简单，只是细节处理稍加注意。

Lavalamp Menu是一种很好的效果，早期在国外的博客中看到过这种效果，是通过jquery插件制作的，一开始还不知道这种效果就叫Lavalamp呢？后来为之告诉我的，今天使用CSS3写了一个垂直的Lavalamp的导航效果，这个效果其实很简单，主要是ribbons的制作要点功夫，然手就是选择器的使用，如果你掌握了这两个部分的知识，那么制作这个效果只是一个思路问题，看看代码你就知道了。

菜单效果在网上琳琅满目，w3cplus也制作了不少。今天根据Metrostyle的UI设计效果，配合CSS3的transform，aimation属性制作了一个下拉的动画导航效果。这个效果在webkit浏览器下得到较好的支持，在Firefox下有些卡。其中最关键的地方使用了两个额外标签控制翻转的前后效果，详细的制作过程看代码吧。

由于藤藤忙于考试，所以好久没有和大家分享CSS3的案例了，今天藤藤特意整理了一个DEMO与大家分享。这个案例是一个圆形转盘导航，初看效果可能很多人都会认为不可思议，CSS3能做出这样的效果，是的，真的是CSS3做的。在整个效果中有几个关键之处,扇形形是通过clip、border-radius和transfrom来实现，其中使用gradient和box-shadow制作了不同的颜色块。对于icon就不用说了，@font-face来完成的。如果你感兴趣，不仿自己先思考一下。

下拉菜单如果不需要兼容IE6的话，完全可以不依赖于任何js脚本实现，今天这个案例也是有关于CSS下拉菜单，但有别于以往的，主要区别是子菜单是固定显示在那，而不是默认隐藏，鼠标悬浮显示的那种，另外还通过CSS3添加了一个滑动块的效果，以前这种滑动块效果也是需要js来实现，今天看到的是没有使用任何脚本代码，感兴趣的不仿一看。

辞岁迎新，在2012年w3cplus为大家提供了116个案例，其中案例有原创，也有仿制，同时也有转载，但这些案例都是最新，最有创意的，也是我们精心挑选的，让我从中获益不浅。从藤藤加入w3cplus后，我们开辟了一个藤藤每日一练 栏目，她经过自己的努力和大有分享了近四十个有关于CSS3的案例，这些案例有的是独立创造的，有的是根据国外知名的设计图，将设计转换为CSS3的code。我想有很多同学从中学到了自己想学的知识。我们将在2013年会为大家推出更多的、更有意义的案例。今天藤藤为大家提供新年来第一个案例。希望大家喜欢，更希望大家能支持我们w3cplus的发展。

这一个个人信息面板导航效果，整个效果展示的是个人相关信息的菜单项，以及搜索功能。在这个案例中使用的CSS3属性相对较多，有transition做的过渡动画效果、有transform做的3D旋转动画、@font-face实现的icon效果，gradient制作的双色块导航背景。而其中运用的最好的是CSS3的选择器，整个案例中使用了多个CSS3选择器，来控制需要选择的元素，比如说“:not”选择器，“nth-children()“选择器，详细的请看Demo的整个实现过程。

白牙同学好久都没有做练习了，今天为大家带来一个CSS3制作的简单大型导航，运用到的CSS3属性包括圆角border-radius、渐变、盒子和文字阴影等等。

简约而又养眼的一个导航。