最近遇到客户来了一个我没遇到过的需求。那就是制作一个同心圆菜单栏。因为公司没有其他人指导我,所以我自己在网上搜索了很久,最后是根据(http://www.w3cplus.com/css3/building-a-circular-navigation-with-css-transforms.html)这个链接上的教程逐步实现了。是使用纯css3的transform来实现的,没有用过什么插件。之前对transform属性接触的比较少,所以刚开始做的时候有点吃力,当你理解后你就会知道transform是有多么的强大,当然做的时候遇到一个bug我怎么也解决不了,下面我会提出来的,希望哪位大神能够解决的告知一声;
制作的步骤:
1.我们需要将导航项绝对定位在容器里面
2.将每一项的变换原点设置成他们的右下角
3.然后往左上角平移导航项,让它们的变换原点和容器中心相吻合
4.然后按照公式顺时针旋转每一项到指定的位置:对于第i项,需要旋转:i*x,其中x是圆心角的值。
5.然后让它们变形以获取我们想要的圆心角(使用上面提到过的公式)。
6.反向倾斜a标签,意味着按列表项需要按相反的值倾斜, 然后用- [90 – (x/2) ]的值反向 旋转,x是圆心角的值。那么对于40度的圆心角,我们需要倾斜a标签-40度并且按-[ 90 – (40/2) ] = -70 度旋转。
a标签被绝对定位在它们的父级中,而且列表项的overflow被设置为hidden,这意味着a标签的一部分被裁切,所以为了确保a标签中的文字/图标出现在可见部分,我们将内容居中对齐。
使用到的数学知识:
旋转导航项到指定位置:角度y = i * x (i是第几项,x是圆心角的值)
按照90-x倾斜(x是圆心角的值)
如果要相对称反方向旋转导航项(这一步实际上和前一步合并)
制作的步骤:
1.我们需要将导航项绝对定位在容器里面
2.将每一项的变换原点设置成他们的右下角
3.然后往左上角平移导航项,让它们的变换原点和容器中心相吻合
4.然后按照公式顺时针旋转每一项到指定的位置:对于第i项,需要旋转:i*x,其中x是圆心角的值。
5.然后让它们变形以获取我们想要的圆心角(使用上面提到过的公式)。
6.反向倾斜a标签,意味着按列表项需要按相反的值倾斜, 然后用- [90 – (x/2) ]的值反向 旋转,x是圆心角的值。那么对于40度的圆心角,我们需要倾斜a标签-40度并且按-[ 90 – (40/2) ] = -70 度旋转。
a标签被绝对定位在它们的父级中,而且列表项的overflow被设置为hidden,这意味着a标签的一部分被裁切,所以为了确保a标签中的文字/图标出现在可见部分,我们将内容居中对齐。
使用到的数学知识:
旋转导航项到指定位置:角度y = i * x (i是第几项,x是圆心角的值)
按照90-x倾斜(x是圆心角的值)
如果要相对称反方向旋转导航项(这一步实际上和前一步合并)
“反向倾斜”“反向旋转”导航中的a标签(设置text-align为center)
其他不说了,贴上我的代码;
html源码:
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
<title></title>
<link rel="stylesheet" href="css/shouye.css">
</head>
<body>
<header id="header">
<ul>
<li><a href="">我的朋友圈</a></li>
<li><a href="">消息提醒<em>3</em></a></li>
<li><a href="">佩戴天数<em>6</em></a></li>
</ul>
</header>
<div class="logo">
<img src="img/logo.png" alt="">
</div>
<div class="wrap"&g