下面是终极效果，欢迎喜好的同学持续关注我~

动效演示

视频链接：手撸一个超级酷炫的菜单导航动效 - Part1：根本布局

炫酷导航栏html手撸一个超等酷炫的菜单导航CSS动效 Bootstrap
（图片来自网络侵删）

涉及到知识点

开源图标库：ionicons

https://ionic.io/ionicons

flex 布局

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

声明CSS全局变量

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root

:root { --my-color: red; }

transition 被指定为一个或多个 CSS 属性的过渡效果

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition

transform

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

translateX/Y() 二维平面上移动元素

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translateX

calc() 声明 CSS 属性值时实行一些打算

https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

:nth-child() CSS 伪类选择器

https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

伪元素

https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before

::before

::after