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

整体效果

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

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

复制代码

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

1. <nav class="nav84">
   
2.   <a href="javascript:;" class="nav-a84">设计</a>
   
3.   <a href="javascript:;" class="nav-a84">前端</a>
   
4. </nav>

复制代码

1. a 标签主体。

复制代码

css 部分代码

1. .nav84{
   
2.   position: relative;
   
3.   display: flex;
   
4.   justify-content: center;
   
5.   align-items: center;
   
6. }
   
7. .nav-a84{
   
8.   width: max-content;
   
9.   padding: 10px 8px 10px 32px;
   
10.   margin: 0 10px;
    
11.   font-size: 16px;
    
12.   line-height: 1;
    
13.   letter-spacing: 2px;
    
14.   color: #000;
    
15.   text-decoration: none;
    
16.   cursor: pointer;
    
17.   position: relative;
    
18.   display: block;
    
19. }
    
20. .nav-a84:before,.nav-a84:after{
    
21.   content: '';
    
22.   width: 10px;
    
23.   height: 3px;
    
24.   background-color: #888;
    
25.   position: absolute;
    
26.   left: 8px;
    
27.   top: 18px;
    
28.   transition: all 0.2s linear;
    
29. }
    
30. .nav-a84:after{
    
31.   left: 14px;
    
32. }
    
33. .nav-a84:hover:before{
    
34.   transform: rotate(45deg);
    
35. }
    
36. .nav-a84:hover:after{
    
37.   transform: rotate(-45deg);
    
38. }

复制代码

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 页面

1. <!DOCTYPE html>
   
2. <html lang="zh">
   
3.   <head>
   
4.     <meta charset="utf-8">
   
5.     <link rel="stylesheet" href="style.css">
   
6.     <title>动态箭头导航栏</title>
   
7.   </head>
   
8.   <body>
   
9.     <div class="app">
   
10.       <nav class="nav84">
    
11.         <a href="javascript:;" class="nav-a84">设计</a>
    
12.         <a href="javascript:;" class="nav-a84">前端</a>
    
13.       </nav>
    
14.     </div>
    
15.   </body>
    
16. </html>

复制代码

css 样式

1. /** style.css **/
   
2. .app{
   
3.   width: 100%;
   
4.   height: 100vh;
   
5.   background-color: #fff;
   
6.   position: relative;
   
7.   display: flex;
   
8.   justify-content: center;
   
9.   align-items: center;
   
10. }
    
11. .nav84{
    
12.   position: relative;
    
13.   display: flex;
    
14.   justify-content: center;
    
15.   align-items: center;
    
16. }
    
17. .nav-a84{
    
18.   width: max-content;
    
19.   padding: 10px 8px 10px 32px;
    
20.   margin: 0 10px;
    
21.   font-size: 16px;
    
22.   line-height: 1;
    
23.   letter-spacing: 2px;
    
24.   color: #000;
    
25.   text-decoration: none;
    
26.   cursor: pointer;
    
27.   position: relative;
    
28.   display: block;
    
29. }
    
30. .nav-a84:before,.nav-a84:after{
    
31.   content: '';
    
32.   width: 10px;
    
33.   height: 3px;
    
34.   background-color: #888;
    
35.   position: absolute;
    
36.   left: 8px;
    
37.   top: 18px;
    
38.   transition: all 0.2s linear;
    
39. }
    
40. .nav-a84:after{
    
41.   left: 14px;
    
42. }
    
43. .nav-a84:hover:before{
    
44.   transform: rotate(45deg);
    
45. }
    
46. .nav-a84:hover:after{
    
47.   transform: rotate(-45deg);
    
48. }

复制代码