方法
通过css3的transform和transition属性来实现
代码
- 下划线从左到右效果
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>下划线动画</title>
<style>
/*先把a的原有下划线样式给清除*/
a,a:link,a:visited,a:focus{
text-decoration:none;color:#000;
}
/*设置a的定位，给我们自己编写的下划线一个定位参考*/
.left-to-right{
position:relative;
}
/*使用伪类给a下面添加下划线*/
/*css3为了区别伪类选择器把::改为:,使用:也会自动转为::*/
.left-to-right::after{
content:'';
display:block;
/*开始时候下划线的宽度为0*/
width:0;
height:3px;
position:absolute;
left:0;
bottom:-10px;
background:#000;
/*这里我们设定所有改变都有动画效果，可以自己指定样式才有动画效果*/
transition:all 0.3s ease-in-out;
}
.left-to-right:hover::after{
width:100%;
}
</style>
</head>
<body>
<a href="#" class="left-to-right">鼠标经过从左向右延伸的下划线</a>
</body>
</html>- 下划线从右到左效果
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>下划线动画</title>
<style>
a,a:link,a:visited,a:focus{
text-decoration:none;color:#000;
}
.right-to-left{
position:relative;
}
.right-to-left::after{
content:'';
display:block;
width:0;
height:3px;
position:absolute;
right:0; /*区别就是开始时在右边*/
bottom:-10px;
background:#000;
transition:all 0.3s ease-in-out;
}
.right-to-left:hover::after{
width:100%;
}
</style>
</head>
<body>
<a href="#" class="right-to-left">鼠标经过从右向左延伸的下划线</a>
</body>
</html>
- 下划线从中间向两端延伸效果
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>下划线动画</title>
<style>
a,a:link,a:visited,a:focus{
text-decoration:none;color:#000;
}
.center-to-head{
position:relative;
}
.center-to-head::after{
content:'';
display:block;
/*开始时候下划线的宽度为100%*/
width:100%;
height:3px;
position:absolute;
bottom:-10px;
background:#000;
transition:all 0.3s ease-in-out;
/*通过transform的缩放scale来让初始时x轴为0*/
transform: scale3d(0,1,1);
/*将坐标原点移到元素的中间，以原点为中心进行缩放*/
transform-origin:50% 0;
}
.center-to-head:hover::after{
/*鼠标经过时还原到正常比例*/
transform:scale3d(1,1,1);
}
</style>
</head>
<body>
<a href="#" class="center-to-head">鼠标经过从中间向两端延伸的下划线</a>
</body>
</html>