CSS实现炫酷导航栏

最新推荐文章于 2024-08-23 10:41:14 发布

念你那丝微笑

最新推荐文章于 2024-08-23 10:41:14 发布

阅读量6.4k

点赞数 22

分类专栏： HTML实用小功能文章标签： css html 前端

本文链接：https://blog.csdn.net/pig_pig32/article/details/108015245

版权

HTML实用小功能专栏收录该内容

5 篇文章 4 订阅

订阅专栏

实现思路

本导航栏的实现，通过使用伪元素:before和:after这两个伪元素在真正页面元素a标签之前和之后添加新内容（边框，背景颜色），使用transition属性设置过渡效果的时间，再使用:hover选择器来显示。效果如下：
导航栏效果
在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>炫酷导航栏实现</title>
		<!--导入css样式 -->
		<link rel="stylesheet" type="text/css" href="../css/nav.css"/>
	</head>
	<body>
		<div class="nav">
		<ul class="item">
			<li><a href="#">首页</a></li>
			<li><a href="#">技能</a></li>
			<li><a href="#">团队</a></li>
			<li><a href="#">介绍</a></li>
			<li><a href="#">经历</a></li>
			<li><a href="#">关于我们</a></li>
		</ul>
		</div>
	</body>
</html>

CSS代码

body{
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	height: 2000px;
}
.nav{
	width: 100%;
	height: 100px;
	background-color: #00FFFF;
}
.item{
	position: fixed;/*固定在页面顶部*/
	top:10px;
	right:20px;
	margin: 0;
	padding: 0;
	display: flex;/*弹性布局，使li排成一行*/
}
.item li{
	list-style: none;
}
.item li a{
	position: relative;
	display: block;
	padding: 10px 20px;
	margin: 20px 0;
	text-decoration: none;
	text-transform: uppercase;/*将字符转为大写*/
	color: #262626;
	font-weight: bold;
	/* transition: 0.5s; */
}
.item li a:hover{
	color:#fff;
}
.item li a:before{
	/*a:before，在a链接之前添加新内容，这里添加上下边框*/
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	transform: scaleY(2);/*拉长边框两倍*/
	opacity: 0;/*边距不显示*/
	transition: 0.5s;
	z-index: -1;
}
.item li a:hover:before{
	transform: scaleY(1);/*拉长边框两倍*/
	opacity:1;
}
.item li a:after{
	content:'';
	position: absolute;
	top: 1px;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	transform: scale(0);
	transition: 0.5s;
	z-index: -1;
}
.item li a:hover:after{
	transform: scale(1);
}