下划线效果

最新推荐文章于 2021-08-03 18:31:56 发布

原创最新推荐文章于 2021-08-03 18:31:56 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用CSS实现鼠标悬停时下划线的动态效果，包括从中间向两端、从右向左及从左向右的动画过渡。通过伪元素和CSS3的transition属性，可以轻松创建吸引眼球的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>鼠标移入下划线展开</title>

<style type="text/css">

#underline{
display:block;
width: 200px;

height: 50px;

background: #ddd;

margin: 20px;

position: relative;

}

#underline:after{

content: "";

width: 0;

height: 3px;

background: blue;

position: absolute;

bottom:-6px;

left: 50%;

transition: all .3s;

}

#underline:hover:after{

left: 0%;

width: 100%;

}

a,a:link,a:visited,a:focus{
text-decoration:none;color:#000;
}
.center-to-head{
position:relative;
display: inline-block;
+border-bottom: 3px solid transparent;
}
.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);
}
.center-to-head:hover{
/*鼠标经过时还原到正常比例*/
border-bottom: 3px solid #000\0;
+border-bottom: 3px solid #000;
}

.right-to-left{
position:relative;
display: inline-block;
+border-bottom: 3px solid transparent;
}
.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%;
}
.right-to-left:hover{
border-bottom: 3px solid #000\0;
+border-bottom: 3px solid #000;
}
.left-to-right{
position:relative;
display: inline-block;
+border-bottom: 3px solid transparent;
}
/*使用伪类给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%;
}
.left-to-right:hover{
border-bottom: 3px solid #000\0;
+border-bottom: 3px solid #000;
}
</style>

</head>

<body>

<a id="underline"></a>
<a href="#" class="center-to-head">鼠标经过从中间向两端延伸的下划线</a>
<a href="#" class="right-to-left">鼠标经过从右向左延伸的下划线</a>
<a href="#" class="left-to-right">鼠标经过从左向右延伸的下划线</a>

</body>

</html>