css navigation style

html structure  

<div class="nav-menu float-r">
<ul class="menu-item">
<li>
<a class="full-size" href="index.html">
首页
</a>
</li>
<li>
<a class="full-size" href="groupManage.html">
产品
</a>
</li>
<li>
<a class="full-size" href="case.html">
案例
</a>
</li>
<li class="active">
<a class="full-size" href="price.html">
价格
</a>
</li>
<li>
<a class="full-size" href="business.html "> </ li></a>About Us<a class="full-size" href="about.html"><li></ li></a>
cooperation agency







<li>
<a class="full-size" href="help.html">
帮助中心
</a>
</li>
<!-- <li>
<a class="full-size" href="experts.html">
专家申请
</a>
</li> -->
</ul>
</div>

 

css  ：

.menu-item .full-size:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background-color: #403c27;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .6s cubic-bezier(.19,1,.22,1);
transition: all .6s cubic-bezier(.19,1,.22,1)
}

.menu-item .full-size:hover:after {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}

 

effect:

 

Mouse over the text, the gray slowly drawing lines from the intermediate width: 100%, mouses, width: 100% becomes cale (0);