共计 2482 个字符，预计需要花费 7 分钟才能阅读完成。
基于上次公布的 那些你不晓得的炫酷按钮交互成果 反馈比拟好，后续将持续收集那些炫酷的交互成果，心愿能够给你的我的项目添砖加瓦，更上一层楼。
那些你不晓得的炫酷交互成果系列：
- 那些你不晓得的炫酷按钮交互成果
- 那些你不晓得的炫酷导航交互成果
本文带来的炫酷的导航交互成果，一个构造档次清晰的导航是网站必不可少的性能之一，它能够帮忙用户疾速轻松的找到想要的信息。导航性能在 PC 端我的项目用到的比拟多，国内个别的后盾管理系统的导航都比拟相似，都是一些色彩宽高大小的不同，波及到官方网站或流动推广类型的绝对会比拟重设计感以及交互感。以下的成果都是我比拟中意的设计及交互，全都来源于 codepen，为了更不便疾速体验成果，都已更新在码上掘金中，上面有原作者链接，有趣味的能够理解他们的更多作品。
全屏方向导航
带有不同动画选项的全屏导航交互成果，在核心地位 MAIN 下方可抉择不同的动画成果，通过点击上下左右不同的方位切换导航内容，对于有全屏需要的网站这个导航是一个很不错的抉择。外围逻辑是每看到的面板都是一个独立的模块，每个模块的宽高是屏幕的 100%，在每个点击事件中传入下次须要进入模块的 x，y 轴坐标，坐标设置形式以核心地位为（0，0），左侧模块的坐标则是（-1，0），依此类推，最终在最外层的元素中设置以下款式并减少对应的动画切换成果即可。
<div class="panel" data-x-pos="0" data-y-pos="0"></div>
<div class="panel" data-x-pos="0" data-y-pos="1"></div>
<div class="panel" data-x-pos="-1" data-y-pos="1"></div>
<div class="panel" data-x-pos="1" data-y-pos="1"></div>
<div class="panel" data-x-pos="-1" data-y-pos="0"></div>
<div class="panel" data-x-pos="-1" data-y-pos="-1"></div>function setPos(){wrap.style.transform = 'translateX(' + pos_x + '00%) translateY(' + pos_y + '00%)';
}在线预览：https://code.juejin.cn/pen/71…
原作者：Brad Arnett
纯 CSS 折叠导航
纯 CSS 极简设计导航成果，开展时图标动画过渡成为敞开图标，同时内容开展并带有弹性成果，
在线预览：https://code.juejin.cn/pen/71…
原作者：Nikolay Talanov
多层环形导航
点击菜单动画顺次开展显示环形，整个交互成果给网站带来一个很不错的亮点，整个实现逻辑也很简略。点击 Menu 时减少一个 open 类，再次点击 Close 去掉该类，元素存在 open 类时增加对应的动画及款式即可，每一层圆形通过定位布局，依照图例从下往上排列，这样可不须要额定的 z -index 属性管制层级，外围 CSS 代码如下：
@for $i from 1 through $items {.l#{$i} {
.open & {
transition-delay: $i * $transition/$items;
transform: scale3d(1,1,1) rotate3d(0,0,1,$start-rot);
opacity: 1;
}
}
}在线预览：https://code.juejin.cn/pen/71…
原作者：Bennett Feely
宰割多个扇形导航
和上一个交互成果都是一样的圆形菜单替换，这一个整体局中显示，点击开展菜单，所有子菜单合并展现为一个圆形，整个成果还是比拟炫酷的，扇形的布局次要用到了 transform 中的 rotate，skew 两个属性。默认都是一个角度，展现在最上方，当开展时给每个字菜单设置不同的角度并减少 transition 过渡成果即可。
在线预览：https://code.juejin.cn/pen/71…
原作者：Justin
光标带有反转成果的侧边导航
相似的侧边导航开展的成果你应该见过不少，但这个开展的成果给人一种很柔和的感觉，开展后菜单内容顺次显示，最初是减少了一个聚焦的圆追随光标挪动，当遇到菜单内容时会放大圆形并反转显示菜单文字，加深了对导航的交互，这里的反转色基于 mix-blend-mode: difference 实现。这个成果还有两个主题色切换，有趣味的能够在线看成果。
在线预览：https://code.juejin.cn/pen/71…
原作者：Ivan Grozdic
有生机的侧边导航
这个导航款式和常见的导航相似，然而在选中菜单的成果上减少了小小的花色，让整个交互成果感觉很轻快有生机。其实逻辑比较简单，整个红色块是通过定位扭转其 top 值实现，并且在过渡中减少了贝塞尔曲线动画。而后右侧的圆角并不是在底部菜单元素中实现的，是在定位元素中的两个伪元素设置圆角的成果。
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);在线预览：https://code.juejin.cn/pen/71…
原作者：Piyush
纯 CSS 3D 成果导航
很简洁的一款 3D 交互成果，鼠标悬停时菜单突出且变色，这个成果实用的场景可能比拟少，很少有相似的排版布局，然而也是值得分享一下的。
在线预览：https://code.juejin.cn/pen/71…
原作者：Katy DeCorah
完结
本次整顿的导航交互分享就完结了，心愿能够在你的我的项目中带来肯定的播种，如果你还有什么好的设计交互成果欢送留言探讨。前期还会持续整顿分享其余性能组件的优质设计交互成果，如果有什么冀望整顿的组件也欢送留言哈。
看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～
专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）
