验证中...
Languages: CSS
Categories: CSS 技巧
Latest update 2019-05-05 16:52
HTML页
Raw Copy
<ul>
<li>
<a class="nav-href bold" href="javascript:;">Home<span class="nav-line"></span></a>
</li>
</ul>
<ul>
<li>
<a class="nav-href bold" href="javascript:;">GCCU Club<span class="nav-line"></span></a>
</li>
</ul>
CSS页
Raw Copy
.nav-href{
color: #1A2052;
display: inline-block;
margin-top: 13px;
margin-right: 30px;
float: left;
box-sizing: border-box;
}
.nav-line{
width: 0;
height: 2px;
display: block;
background-color: #0022CE;
position: relative;
margin-top: 5px;
}
.nav-href:hover .nav-line{
width: 100%;
animation: change 0.4s ease;
}
@keyframes change {
from{
width: 0;
}
to{
width: 100%;
}
}
img_ZXZsYVZvd1RDZ3FEYThtTER4a1c5RWx5cnMrdjJuU1UxSFRoUmsyU3Vwbm1tMTBXcFBrUWx3PT0.gif

Comment list( 0 )

You need to Sign in for post a comment

Help Search

Gitee_sixth 5th_float_left_close