html转动的圆圈,CSS圆形旋转效果纯CSS制作圆形旋转菜单
效果（七步完成）
我们理念中的菜单都是矩形的，不是横向排列就是纵向排列，这⾥我们打破了常规的思维，把菜单做成圆形的。
在这⾥我们不得不克服⼏个问题：
如何定义html如何悬停定位菜单元素
在此之前先看⼀下最终效果是怎样的，DEMO放在前⾯主要是增加⼤家阅读的兴趣。
下⾯就让我们开始今天的教程吧
第⼀步：构建HTML
在编写HTML之前，必须先了解将要构建的结构是怎么样的，下图表⽰要构建的结构：
每个顶部的矩形框都与下⾯⼤圆中的⼀个⼩圆相联系，当把⿏标悬停在矩形框上时，对应的⼩圆旋转到菜单的顶部。⽽实现这个功能的难点就是怎样实现悬停在⼀个元素上从⽽影响另⼀个元素的表现状态。
为解决这个问题，让我们看看下⾯的HTML：
复制代码代码如下:
target
我们希望通过⿏标悬停在anchor上来改变target段落的颜⾊，如果你对hover的远程操作有⼀个基本的概念，你可能会先写出下⾯的css代码：
复制代码代码如下:
a:hover p { color: blue;}
这段代码不能达到我们的预期效果，观察上⾯HTML代码，我们要改变颜⾊的元素和⿏标悬停的元素分别在不同的div中，这⽆形中增加了我们实现的难度，所以需要改变HTML结构如下，把两个元素分别放在同⼀个div下：
复制代码代码如下:
target
把两个元素分别放在同⼀个div下，anchor和target作为同级元素可以进⾏以下操作
复制代码代码如下:
a:hover + p { color: blue;}
以上就实现了⿏标悬停在a上⾯，并且使紧临它的同级元素改变颜⾊。
具体应⽤：
运⽤上⾯的知识到本教程案例中，我们可以想出⼀个可⾏的结构，⾸先创建3个嵌套div，分别命名class为wrapper, menu和circle.复制代码代码如下:
在menu div⾥⾯设置4个锚点，分别有不同的class，在circle div⾥⾯是⼀个包含4个数字的ul li元素
复制代码代码如下:
1
2
3
4
让我们⽤⼀张图⽚来更清晰的理解上⾯所描述的结构
第⼆步：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
下⾯是对锚点(也就是这⾥的元素)，做⼀些样式设置和悬停效果：
复制代码代码如下:
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
在启⽤预览看⼀些，将会⽐上⾯好看的多，并且悬停会出现设置的效果，但是ul li还是是很乱的表现，接下来将解决这个问题：
第五步：⼩圆的css
⾸先我们这⾥是⽤ul li来制作⼩圆，所以要先清除它的固有样式⽤list-style:none；来清除，然后制作⼩
圆，类似与制作⼤圆，宽⾼相等，border宽度50%，然后设置背景颜⾊和字体：
复制代码代码如下:
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
}
下⾯是最困难的部分，为⼩圆定位，这⾥⽤绝对定位⽅式，⾸先我们⽤nth-child到⼦元素，然后分别⽤top、left属性来定位，并使⽤CSS的transform属性来旋转⼩圆，以便于⼤圆旋转时对应的⼩圆中的数字处于正向。
复制代码代码如下:
.circle li:nth-child(1) {
top: 15px;
css特效文字left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。