CSS实现炫酷导航栏

刺骨的言语ヽ痛彻心扉 2022-11-27 10:19 218阅读 0赞

## 实现思路 ##

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

## HTML代码 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>炫酷导航栏实现</title>
    		
    		<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);
    }

[20200814225459735.gif_pic_center]: /images/20221124/d32499a9afb940a3a00f734dc7fe8124.png