有趣的css - 动态箭头导航栏

yycvip · 发表于 2024-10-13 20:42:22

整体效果

💎知识点：
1:before 和 :after 伪元素选择器
2️:transition 过渡属性
3:max-content 内容最大宽度属性
4️:transform 变形属性

🔑思路：利用伪元素，组合成一个小横线，利用鼠标状态，让小横线过渡成向下箭头，表示有隐藏内容。

复制代码

适用于有二级或者三级内容的导航。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
html 代码

<nav class="nav84">
<a href="javascript:;" class="nav-a84">设计</a>
<a href="javascript:;" class="nav-a84">前端</a>
</nav>

复制代码

a 标签主体。

复制代码

css 部分代码

.nav84{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.nav-a84{
width: max-content;
padding: 10px 8px 10px 32px;
margin: 0 10px;
font-size: 16px;
line-height: 1;
letter-spacing: 2px;
color: #000;
text-decoration: none;
cursor: pointer;
position: relative;
display: block;
}
.nav-a84:before,.nav-a84:after{
content: '';
width: 10px;
height: 3px;
background-color: #888;
position: absolute;
left: 8px;
top: 18px;
transition: all 0.2s linear;
}
.nav-a84:after{
left: 14px;
}
.nav-a84:hover:before{
transform: rotate(45deg);
}
.nav-a84:hover:after{
transform: rotate(-45deg);
}

复制代码

1、定义 nav 标签基本样式及 flex 布局。
2、定义 a 标签基本样式，这里使用的定义宽度属性 width: max-content ，意为 a 标签宽度仅为内容最大宽度，以及 line-height: 1 来让内容垂直居中。
3、基于 a 标签创建 :before 和 :after 伪元素，定义基本样式，通过 position 定位属性，让两个伪元素组成一个小横线，同样加上过渡属性 transition: all 0.2s linear 。
4、利用 :hover 选择器，给 :before 和 :after 伪元素设置鼠标悬浮效果，让两个伪元素通过变形 transform 属性，让小横线变形成一个向下的箭头就可以了。

完整代码如下
html 页面

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>动态箭头导航栏</title>
</head>
<body>
<div class="app">
<nav class="nav84">
<a href="javascript:;" class="nav-a84">设计</a>
<a href="javascript:;" class="nav-a84">前端</a>
</nav>
</div>
</body>
</html>

复制代码

css 样式

/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #fff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.nav84{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.nav-a84{
width: max-content;
padding: 10px 8px 10px 32px;
margin: 0 10px;
font-size: 16px;
line-height: 1;
letter-spacing: 2px;
color: #000;
text-decoration: none;
cursor: pointer;
position: relative;
display: block;
}
.nav-a84:before,.nav-a84:after{
content: '';
width: 10px;
height: 3px;
background-color: #888;
position: absolute;
left: 8px;
top: 18px;
transition: all 0.2s linear;
}
.nav-a84:after{
left: 14px;
}
.nav-a84:hover:before{
transform: rotate(45deg);
}
.nav-a84:hover:after{
transform: rotate(-45deg);
}

复制代码

		自动登录	找回密码
密码			立即注册