曾经我们对于jquery实现的lavalamp那是极度热爱啊，现在不用借助jquery，我们用纯css3实现了，过瘾啊。技术的关键在于在菜单的li最后先增加一个空元素来承载那个滑动的东西，再使用css3的兄弟元素选择器~，然后对于不同的li滑过的时候，设置承载滑动的那个元素的left位置。

本实例通过:before和:after生成高度和宽度透明度都为0且背景为渐变的两个内容，两个不同点在于绝对定位的位置一个为left，一个为right，然后渐变背景的方向刚好相反；最后当鼠标滑过改变高度宽度及透明度，就完成了该动画。因为是对:hover状态下的:before和:after生成的内容进行宽度变化，所以该实例如同先前的那个:hover状态下的激发伪元素动画一样，webkit内核是不支持的。

本实例主要是比较好看哈哈，然后使用了css3初级学习者一般不理解的:target这个伪元素，所以收纳。运用的css3有gradient生成渐变背景，:before生成前面的图标及二级菜单的箭头，:target来实现折叠效果，同时还应用了个transition来改变opacity的动画。当然这个案例其实左边的小图标还可以用font-face来制作，那样就更好了。

导航是WEB页面中不可或缺的一部分，以前制作渐变、圆角类型的导航，都需要使用背景图片来制作，今天给大家介绍一个使用CSS3制作的导航效果，在这个实例中主要运用了CSS3的渐变和box-shadow。