CSS3 循环菜单

CSS3 Circular Menu

本文关键字：菜单 循环 CSS3      更新时间：2023-09-26

我找到了这个漂亮的圆形菜单，我正在努力适应我自己的需求。

我只需要该菜单中的四个项目，它们的"宽度"(水平空间(应该增加。

我已经把原始代码放在这个小提琴里。包含四个项目的版本在这里。

如前所述，我试图通过增加它们的大小来填补两者之间的空白，因为我想在那里容纳更多的文本。

我认为可能相关的部分 CSS：

.csstransforms .cn-wrapper li {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    margin-top: -1.3em;
    margin-left: -10em;
    width: 10em;
    height: 10em;
    font-size: 1.5em;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: rotate(76deg) skew(60deg);
    -moz-transform: rotate(76deg) skew(60deg);
    -ms-transform: rotate(76deg) skew(60deg);
    transform: rotate(76deg) skew(60deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    pointer-events: none;
}

你只需要弄乱transform skew.

transform: rotate(...) skew(40deg);

有关解决方案，请参阅此 JSFiddle。

(附言这是一种很酷的菜单动画！

相关文章：