html旋转的环形菜单,前端开发圆形旋转导航菜单教程

/p>

前端开发商城页面:圆形旋转导航菜单

html,

body {

padding: 0;

margin: 0;

}

圆形菜单[最多容纳8个最大正方形菜单块, 若需容纳更多的菜单块,则需要缩小菜单块的大小]

半径 oR = 150px;

圆心坐标(150,150)

–>

圆心

半径 iR = 50px;

圆心坐标(150,150)

–>

==========================

最大菜单块(正方形)

对角线长度 mDLen = oR – iR;

边长 mWidth = mHeight = mDLen的平方 / 2 的结果 再开方 最后取整

==========================

菜单块滑动圆

半径 mR = iR + (mDLen / 2)

==========================

–>

1

2

3

4

5

6

7