纯CSS酷炫导航栏的实现

纯CSS酷炫导航栏的实现

      作者语录： 导航栏对于我们现在的日常生活非常的重要，基本上每一个页面都要用到，所以让我们的导航栏加上酷炫的效果会更加的吸睛，今天我就用纯CSS和CSS3来实现。

1.先给大家说一下我要用到的东西：

• CSS基础知识
• CSS3动画

2.先写出基本的框架，下面是我的代码

你们也可以自己写自己想要做的样子，这里只是简单的做个例子。

3.下面我们开始写我们的css代码：

(1).我们在写之前的第一步应该是清除之前的固定样式，用下面的代码：

*{    margin: 0;    
      padding: 0;  
      list-style:none;  /* 去点列表前面的黑点 */    
      text-decoration: none;
  }

(2).

• 设置完基本的宽高后，我们为了保持布局不变，可以设置最小的宽度，
     min-width: 140px;
• 当设置行高后，li还是没有被撑开的话，可以设置 max-height，来使它看起来统一。

(3).我们现在现在看到的页面是比较单调的现在，我们就要设置写比较有意思的样式：

• 渐变色(有两个参数，都为颜色）
  background: linear-gradient(#3d3838,#999999);
• hover效果当然是必不可少的，我在利用hover时实现列表的变色，透明度的改变，并且要二级菜单的显示以及旋转的效果呈现。
• 接下来我们说一下关于旋转，w3scool上也有详细的讲解，我会用例子来说明。
  <1/ perspective属性：定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
  <2/>transform:转换 与transition:过渡(具体在这里)
  我自己写的代码在下面实现的是当鼠标悬浮在列表上时，子菜单以中间轴旋转90度的方式出现：

.submenu li{   
     /* transform-origin: left top; */   
      opacity: 0;    
      transform: rotateY(90deg);   
      transition:opcity 0.4s, transform 0.5s;  
      min-height: 0;
         }
 .menu>li:hover .submenu li{    
         opacity: 1;    
         transform: rotate(0deg);   
         min-height: 100%;
   }

这里需要注意的是，我第一次没有加 > 子元素选择器时，渲染就就会是所有的后代，影响结果，所以我们在设置样式选择选择器时，选择器尽可能的选择少的选择范围,毕竟渲染是需要占用资源的,另外一个就是后代不需要对应的样式的话,还得覆盖掉之前样式。
3/> 我想要二级菜单从上至下的依次出现，那么就要用到transition-delay属性，那么我们就要选择出第一个儿子，第二个儿子，我们就要用到li:nth-child( X ),从1开始，不像数组，所以我的代码如下：

.submenu li:nth-child(1) {
    transition-delay: 0ms;
    }
.submenu li:nth-child(2) {
    transition-delay: 100ms;
    }
.submenu li:nth-child(3) {
    transition-delay: 200ms;
    }
.submenu li:nth-child(4) {
    transition-delay: 300ms;
    }
.submenu li:nth-child(5) {
    transition-delay: 400ms;
    }
.submenu li:nth-child(6) {
    transition-delay: 500ms;
    }

到这里我们我们大概就写完了，下面是我的效果图：

这是个比较简单的例子，希望可以学到东西。