纯css使用transform实现同心圆导航栏菜单

最新推荐文章于 2024-08-12 23:09:57 发布

Gavin__Xie

最新推荐文章于 2024-08-12 23:09:57 发布

阅读量2.1k

点赞数

分类专栏： css3 文章标签： html css3 导航

本文链接：https://blog.csdn.net/xiejinwen/article/details/54171195

版权

最近遇到客户来了一个我没遇到过的需求。那就是制作一个同心圆菜单栏。因为公司没有其他人指导我，所以我自己在网上搜索了很久，最后是根据(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是圆心角的值）
如果要相对称反方向旋转导航项（这一步实际上和前一步合并）

“反向倾斜”“反向旋转”导航中的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