鼠标移入菜单文字出现下划线

最新推荐文章于 2024-03-12 10:31:17 发布

桃之夭夭、

最新推荐文章于 2024-03-12 10:31:17 发布

阅读量4.4k

点赞数

本文介绍了一种使用CSS实现的菜单栏下划线动画效果。通过为导航链接添加悬停状态下的下划线动画，可以提升网站的交互体验。代码中详细展示了如何设置HTML结构及CSS样式来实现平滑过渡的下划线扩展效果。

<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>菜单栏下划线动画</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 100px;
background-color:#2D3E50;
}
header nav ul{
width: 50%;
padding: 0;
margin: 0 auto;
}
header nav ul li{
display: inline-block;
padding: 0 0.8em;
}
header nav a{
position: relative;
text-decoration: none;
color: #fff;
display: block;
padding: 1.2em 0.8em;
}
header nav .nav-underline:before {
content: "";
position: absolute;
bottom: 0;
width: 0;
border-bottom: 2px solid #fff;
}
header nav .nav-underline:hover:before {
width: 80%;
}
header nav .nav-underline:before {
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
}
header nav .nav-underline-active,
header nav .nav-underline-active:hover {
border-bottom: 2px solid #fff;
text-align: center;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li class=" pure-menu-selected"><a href="#" class="nav-underline-active">HOME</a></li>
<li ><a href="#" class="nav-underline">SKILLS</a></li>
<li ><a href="#" class="nav-underline">INTERESTS</a></li>
<li ><a href="#" class="nav-underline">CONTACT ME</a></li>
</ul>
</nav>
</header>
</body>
</html>