CSS导航下划线实现

  在做页面的时候发现页面导航栏有一个很棒的效果。具体的效果就是，当鼠标移到一个导航栏时，导航栏下方会缓慢出现一条线。

当用ui内联的方式实现普通的导航后，在html中的li添加一个class用来控制下划线的移动。

html部分：

 <div class="top">
    <ul>
        <li>首页</li>
        <li>最新活动</li>
        <li>项目介绍</li>
        <li>爱心社区</li>
        <li>关于我们</li>
        <li class="move"></li>
    </ul>
        </div>

css部分，主要是对move部分的控制。对move部分设置border-top并设置宽度，设置position属性调整下划线
位置使下划线处于导航栏的下方。另一个重点就是用trisition对width实现效果的渐变.

css部分：

#d1 .top ul {
    display: inline-block;
    position: absolute;
    right:20%;
    margin-top: -44px;
    box-sizing: border-box;
    cursor: pointer;
}
#d1 .top ul li{
    padding: 2px;
    color: #4E3A4F;
    list-style: none;
    display: inline-block;
    margin: 10px;
    float: left;
    box-sizing: border-box;
    -webkit-transition: color 0.4s ease-in-out;
    -moz-transition: color 0.4s ease-in-out;
    -ms-transition: color 0.4s ease-in-out;
    -o-transition: color 0.4s ease-in-out;
    transition: color 0.4s ease-in-out;
    -webkit-transition: border 0.4s ease-in-out;
    -moz-transition: border 0.4s ease-in-out;
    -ms-transition: border 0.4s ease-in-out;
    -o-transition: border 0.4s ease-in-out;
    transition: border 0.4s ease-in-out;
}
#d1 .top ul li:hover{
    color: red;
}
#d1 .top ul li.move{
    width: 65px;
    border-top: 4px solid red ;
    position: absolute;
    top: 31px;
    left: 35px;
    -webkit-transition: left 0.4s ease-in-out;
    -moz-transition: left 0.4s ease-in-out;
    -ms-transition: left 0.4s ease-in-out;
    -o-transition: left 0.4s ease-in-out;
    transition: left 0.4s ease-in-out;
}

关键部分在于这里对left的设置，设置hover时，move也就是下划线出现的位置，通过hover不同的块使left不断改变实现下划线的移动。
#d1 .top ul li:nth-child(1):hover~.move{
    left: 0;
}
#d1 .top ul li:nth-child(2):hover~.move{
    left: 20%;
}
#d1 .top ul li:nth-child(3):hover~.move{
     left: 40%;
 }
#d1 .top ul li:nth-child(4):hover~.move{
      left: 60%;
  }
#d1 .top ul li:nth-child(5):hover~.move{
       left: 80%;

 

转载于:https://www.cnblogs.com/lsmh/p/5958650.html