炫酷导航栏 今天的任务是做一个炫酷的导航栏，当然前贤已经为我们造好轮子了，我们要做的是如何理解，学习，之后再完善。 一.本章重点是学习如何实现带有旋转显示的导航栏 首先，明白需求： 导航栏

 

    炫酷导航栏

    今天的任务是做一个炫酷的导航栏，当然前贤已经为我们造好轮子了，我们要做的是如何理解，学习，之后再完善。

    一.本章重点是学习如何实现带有旋转显示的导航栏

    首先，明白需求：

1. 导航栏的DOM（块——ul——li——ul——li）；
2. 当鼠标移动到导航栏的时候，导航栏里面内容样式改变，之后小框框粉墨登场（旋转出现）opacity由0变成1，当鼠标离开之后，它们悄然消失。

具体样式如下：

 

    其中li的部分css属性：

li{  opacity:0;  transform:relateY(90deg);/*旋转90°*/  ransition: opacity .4s, transform .4s;/*透明度设置为0.4，旋转时间设为0.4s*/}

    鼠标停留在li的时候，开始“行动”。

li:hover{  color:**;  opacity: 1;  transform: none;}

    但我们会发现li里面的内容会一起旋转显示（难免有点low）,所以要给li包含ul的每一个小“块”进行一个延时显示。

li:hover .submenu li:nth-child(1){   transition-delay: 0s;}li:hover .submenu li:nth-child(2){   transition-delay: 50ms;}li:hover .submenu li:nth-child(3){   transition-delay: 100ms;}li:hover .submenu li:nth-child(4){   transition-delay: 150ms;}

    以上是主要代码。

    但有趣的是，其实里面的代码还是很有文章的（饕餮状）。

    更详细的代码请看链接

参考：http://www.cnblogs.com/xinxingyu/p/4794544.html（不得不爱xxy）