CSS3制作链接hover下划线动画

效果1

效果2

<html结构>

<nav>

<a href="#" class="top">Hover this link</a>

</nav>

<css样式-效果1>

nav{

text-align: center;

width: 200px;

height: 75px;

line-height: 75px;

background-color: #000;

}

.top{

position: relative;

text-decoration: none;

color: #fff;

font-size: 25px;

}

.top:before{

content: "";

position: absolute;

left: 0;    /* 从左边开始 *／

bottom: -2px;

width: 0;    /* 没有hover的时候定义width为0，这样可以实现宽度从0到100%的变化。*／

height: 1px;

background: #fff;    /* 下划线的颜色 *／

-webkit-transition: all .3s;    /* 用时 *／

transition: all .3s;

}

.top:hover:before{

width: 100%;    /* 结束时下划线的宽度为100% *／

right: 0;    /* 到右边结束，不写也没关系 *／

}

<css样式-效果2>

nav{

text-align: center;

width: 200px;

height: 75px;

line-height: 75px;

background-color: #000;

}

.top:before{

content: "";

position: absolute;

left: 0;  

bottom: -2px;

width: 100%;    /* 宽度为100% *／

height: 1px;

background: #fff;    /* 下划线的颜色 *／

transform: scale(0);    /* 这个实现的关键就是scale(0)到scale(1)的变化。*／

transition: all .3s;

}

.top:hover:before {

transform: scale(1);  

/*放大为100%---scale transform的原点是中点，所以会从中间的位置开始动画。---动画有透明渐变的效果，和scale的表现形式有关。*/

}

---

参考来源：http://www.cnblogs.com/zhangmingze/p/5351983.html