下划线滑动

下划线滑动,

最后一个li空着，留着后面有用，通过绝对定位，把最后一个 li.quebec 定位到导航下方，设置宽度高度。设置 transition，当我们改变 left, width的时候就能实现动画。

 

<div  class="info">
        <ul>
            <li class="community"><a >社区</a></li>
            <li class="support"><a >支持</a></li>
            <li class="more"><a >更多</a></li>
            <li class="line">&nbsp;</li>
        </ul>
</div>

 css　样式：

ul {
    position: relative;
    overflow: hidden;
    padding-left: 0px;
  }
  li {
        list-style: none outside;
        position: relative;
        z-index: 1;
        float: left;
        margin-right: 10px;
    }
    li a {
        position: relative;
        width: 100px;
        color:#333 ;
        display: block;
        margin: 0 0;
        border-bottom: 5px solid transparent;
        padding: 10px 0;
        text-align: center;
        text-decoration: none;
    }
    .selected a {
        border-bottom: 5px solid #cfd0d0;
        color: #511d7f;
    }

最后一个li空着，留着后面有用。（css样式就不多解释了啊）

实现导航下划线

下面实现动画部分。

下方紫色滚动条是通过，刚才留着的最后一个li元素实现。 

.line {
      position: absolute;
      bottom: 0px;
      left: -100px;
      z-index: 3;
      margin: 0;
      border: 0;
      width: 5px;
      height: 5px;
      padding: 0;
      overflow: hidden;
      background: #511d7f;
 
     -webkit-transition-property: left, width;
     -moz-transition-property: left, width;
     -o-transition-property: left, width;
     transition-property: left, width;
 
     -webkit-transition-duration: .5s;
     -moz-transition-duration: .5s;
     -o-transition-duration: .5s;
     transition-duration: .5s;
  }

 注释：z-index 属性设置元素的堆叠顺序。But只能在定位元素奏效（position：)

overflow是对内容溢出元素框做的处理事情。

transition-property是实现下划线动画效果；

transition-duration 完成动画的时间；

-webkit:适配Safari 和 Chrome 浏览器

-moz:适配Firefox4浏览器

-o:适配Opera浏览器

当hover到导航上面的时候，li.quebec 就定位left到其下面。实现这个效果的是css3的同级通用选择器 “～”

比如 A ~ B 匹配的是 任何在A元素之后的同级B元素。

.community:hover ~ li.line { left: 5px; width: 110px; }
  .support:hover ~ li.line { left: 115px; width: 110px; }
  .more:hover ~ li.line { left: 225px; width: 110px; }

so这里就完成了一个 纯css的下划线动画导航。

为了效果更炫一点，我们还可以在hover不同li的时候，改变li.line的颜色、背景、透明度等。