<a href=”#” class=”two”>Two</a>
<a href=”#” class=”three”>Three</a>
<a href=”#” class=”four”>Four</a>
<div class=”circle”>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
让我们用一张图片来更清晰的理解上面所描述的结构
第二步：wrapper div的css
上面的HTML代码自此就书写完毕，下面主要的是css的问题，首先我们定义一些基本的样式：
复制代码
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*WRAPPER*/
.wrapper {
position: relative;
margin: 20px auto;
width: 3670px;
}
第三步：circle div的css
这一步我们将定义一个大圆，用css制作圆是很简单的我们只需要把元素的宽度和高度设置成相等，然后把border的宽度设置成50%就行了。更多关于利用border来创建图形的教程可以参看我的《创建三角形的几种不同的方式》这篇文章。
复制代码
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
}
为了让圆看起来更好看，更具有立体感，我们为其添加阴影效果transition，它将会在circle旋转时用到。
复制代码
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #093b62;
box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
如果我们看一看实时预览，我们应该有一个漂亮的大圆和一些其他各种分散的元素，接下来将会对这些分散的元素进行处理。
第四步：menu div的css
下面是对锚点（也就是这里的<a>元素），做一些样式设置和悬停效果：
复制代码
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
