css 導航樣式

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;
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)
}

 

效果：

 

鼠標移到文字上，灰色的線條會從中間緩慢拉伸width：100%，鼠標移開，width：100% 變成  cale(0)；