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