环形菜单动画特效

想做个径向菜单的动画特效菜单了，就是点击中间一个按键，菜单会从中间向外出来，并且把点击的那个按键包围在中间，大家可以看下完整效果的gif图

大家可以看下html的结构很简单

    <div class="navWrap">
       <div class="nav">
          <span>菜单1</span>
          <span>菜单2</span>
          <span>菜单3</span>
          <span>菜单4</span>
       </div>
       <span class="clitbtn">点击</span>
    </div>

主要就是利用css的淡入淡出效果和缩放，

这里有一点比较麻烦的是，我们要做的效果是所有菜单围着点击按键是一个圆形， 可以先看我用css写的状态，没有去计算坐标

如果我们想让它呈现出一个圆形，我们就需要根据当前的角度和半径计算出每个菜单的x，y，需要利用三角函数去算出当前菜单的坐标，大家可以看下图，比较简陋，大家凑活着看

这个坐标轴是css的坐标轴，起始点实在左上角，为了方便看所以这样画了

角度的值 我们可以根据你有几个菜单，用360/菜单的个数，就可以得到相对应的角度了,这个角度是间隔菜单的角度，并不是我们实际计算的角度，角度我们需要累加，如：第一个参数30度 第2个菜单就是 60度。。。这种情况

需要注意的一点Math.cos或者Math.sin不能用角度，我们需要吧角度转成弧度公式：a/b = π/180 a是弧度数 b是角度。我们是已知角度，a=b*(π/180)

这是我的代码块，但是我引用的jq不生效 不知道为什么大家可以把带块里的代码 复制到本地

“我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！”