HTML5导航下划线,CSS导航下划线实现

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

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

html部分：

首页

最新活动

项目介绍

爱心社区

关于我们

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%;