DEMO

Question

我做了一个CSS3圆形动画菜单，菜单项从左端开始，向右旋转到相应的位置。
我已将每个菜单项放在一个容器中，并使每个容器旋转到不同的角度以显示动画我的问题是因为每个菜单项都在一个容器内，因为有菜单项就会有多个容器，这使得无法在每个菜单项中获取锚标记的:hover动作，因为容器是前几名。有人可以建议修复此问题吗？

你可以在这里看到：

http://jsfiddle.net/blueeyes/bWWHm/4/

您可以看到我可以悬停链接aa和fff，因为aa没有容器，fff的容器位于所有容器之上。
其他链接位于容器下，因此无法访问。

Answer 1

你过度复杂，你不需要容器。您只需将所有菜单项绝对放置在圆的中心，然后将每个菜单项旋转所需的角度，将其向外平移圆的半径，然后再以相反的角度旋转它以使文本再次水平。这样，每个菜单项的中心都将在圆圈上。

DEMO

<强> HTML ：

<ul class='circ-menu'>
  <li><a href='#'>aa</a></li>
  <li><a href='#'>bb</a></li>
  <!-- and so on -->
</ul>

<强> CSS ：

.circ-menu {
  position: relative;
  padding: 0;
  width: 10em; height: 10em;
  list-style: none;
}
.circ-menu li {
  position: absolute;
  top: 50%; left: 50%;
  margin: -1.5em;
  width: 3em; height: 3em;
  background: rgba(255, 0, 0, .3);
}
.circ-menu li:first-child {
  transform: rotate(-112.5deg) translateY(-5em) rotate(112.5deg);
}
.circ-menu li:nth-child(2) {
  transform: rotate(-67.5deg) translateY(-5em) rotate(67.5deg);
}
/* and so on */

CSS3圆形动画

1 个答案:

DEMO