html 结构
<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">
合作代理
</a>
</li>
<li>
<a class="full-size" href="about.html">
关于我们
</a>
</li>
<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;
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)
}
效果：
鼠标移到文字上，灰色的线条会从中间缓慢拉伸width：100%，鼠标移开，width：100% 变成 cale(0)；