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);
}