1

我做了一个 CSS3 圆形动画菜单，菜单项从左端开始，向右旋转到相应的位置。
我将每个菜单项放在一个容器中，并使每个容器旋转到不同的角度以显示动画。
我的问题是，因为每个菜单项都在一个容器内，所以容器的数量与菜单项的数量一样多，这使得无法:hover在每个菜单项内获取锚标记的操作，因为容器位于顶部。有人可以建议解决这个问题吗？

你可以在这里看到它：

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

您可以看到我可以将链接悬停aa，fff因为aa没有容器，并且容器fff位于最重要的位置。
其他链接位于容器下方，因此无法访问。

4

1 回答 1

1

你把事情复杂化了，你不需要一个容器。您只需将所有菜单项绝对定位在圆的中心，然后将每个菜单项旋转所需的角度，将其向外平移圆的半径，然后再次将其旋转相反的角度以使文本再次水平。这样，每个菜单项的中心将位于圆圈上。

演示

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 */
于 2013-03-03T11:29:04.690 回答