那些你不知道的炫酷导航交互效果-CFANZ编程社区

基于上次发布的那些你不知道的炫酷按钮交互效果反馈比较好，后续将继续收集那些炫酷的交互效果，希望可以给你的项目添砖加瓦，更上一层楼。

那些你不知道的炫酷交互效果系列：

那些你不知道的炫酷按钮交互效果
那些你不知道的炫酷导航交互效果

本文带来的炫酷的导航交互效果，一个结构层次清晰的导航是网站必不可少的功能之一，它可以帮助用户快速轻松的找到想要的信息。导航功能在PC端项目用到的比较多，国内一般的后台管理系统的导航都比较类似，都是一些颜色宽高大小的不同，涉及到官方网站或活动推广类型的相对会比较重设计感以及交互感。以下的效果都是我比较中意的设计及交互，全都来源于codepen，为了更方便快速体验效果，都已更新在码上掘金中，下面有原作者链接，有兴趣的可以了解他们的更多作品。

全屏方向导航

<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/7159770082090942498

原作者：Brad Arnett

纯CSS折叠导航

在线预览：https://code.juejin.cn/pen/7159514650143375368

原作者：Nikolay Talanov

多层环形导航

@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/7159517310380671007

原作者：Bennett Feely

分割多个扇形导航

在线预览：https://code.juejin.cn/pen/7159821463334158336

原作者：Justin

光标带有反转效果的侧边导航

在线预览：https://code.juejin.cn/pen/7159775604047364099

原作者：Ivan Grozdic

有活力的侧边导航

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

在线预览：https://code.juejin.cn/pen/7159782902702538788

原作者：Piyush

纯CSS 3D效果导航

在线预览：https://code.juejin.cn/pen/7159814391708745736

原作者：Katy DeCorah

结束

本次整理的导航交互分享就结束了，希望可以在你的项目中带来一定的收获，如果你还有什么好的设计交互效果欢迎留言讨论。后期还会继续整理分享其他功能组件的优质设计交互效果，如果有什么期望整理的组件也欢迎留言哈。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）