最近实现了一个酷炫的菜单导航CSS动效，使用纯HTML、CSS、JavaScript实现，实现方法简单高效。

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

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

涉及到知识点

开源图标库：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

Tags：css nth-child

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。