box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}
自此css样式全部定义完成，剩下的就是文章开头讲到的远程控制元素行为：
第七步：圆的”:hover”伪元素设置
要使菜单旋转，必须结合文章开头的远程控制教程，当鼠标悬停在锚点上时，下面的圆旋转到对应的顶部位置。HTML中锚点和circle div是同级元素，这里我们需要搞定的是选择器的问题，也是本文最难的部分。所以选择器部分，第一个不用旋转，所以我们从第二个开始如下：
复制代码
.menu > .two:hover ~ .circle {}
2所处的位置需要逆时针旋转90°才能到达预期位置所以：
复制代码
menu > .two:hover ~ .circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
类似的我们有.one 0° .two -90°, .three -180° ,.four -270°.
复制代码
/*HOVER STATES*/
.menu > .one:hover ~ .circle {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu > .two:hover ~ .circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu > .three:hover ~ .circle {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.menu > .four:hover ~ .circle {
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
最终效果：
