2

我想使用 CSS3 转换动画来实现一个径向菜单，类似于本页中的第三个演示。在 jQuery 中有一个使用画布Radmenu的实现，但它的移动不如 Flash 流畅。

第一个问题是：这可行吗？如果可能的话，只使用 2D 变换和动画，这样它就可以在更多平台上工作。

第二个问题：在哪里做？简单的 CSS3 示例展示了如何平移、剪切、缩放和旋转简单对象。但我不知道从哪里开始寻找有关如何实现类似 flash 菜单的信息。

4

3 回答 3

1

我会简单地回复 rsilva 的评论，但不幸的是我没有足够的代表，所以对此表示歉意。

请随意从http://wewillbeok.com/radial借用/窃取，但请注意，这绝对不是最干净的代码，也没有丝毫记录。Yijiang 说的很对，我使用的动画在旧浏览器上表现不佳。删除“缩放”动画可以显着提高性能。

此处提供了另一个文档齐全且性能良好的实现：http ://www.webtoolkit.info/javascript-pie-menu.html ，尽管它可能并不像“花哨”。

因此，为了更直接地回答您的问题，我认为您将很难使用纯CSS3 动画创建这样的菜单，如果这是您正在寻找的，但结合 JS 和 CSS3 绝对可行。理想的实现很可能介于目前提到的所有示例之间。

于 2010-08-31T15:18:50.493 回答
1

看看这里

这会将一个选择变成一个饼形菜单，可以通过 css 设置样式，不像上面那样花哨。

用法：$("#your-selectbox-id").pieselmenu($(this));

于 2011-10-04T14:33:03.817 回答
0

在大多数情况下，必须有一些 Javascript 层，因为您需要计算项目的分布。CSS3 可用于通过执行变换来帮助元素的缩放和旋转。它们适用于 Chrome、Safari、IE9+、FireFox 3.5+ 和 Opera 11+。

不久前我创建了一个插件，jQuery Radmenu（径向菜单）插件。我正在制作一个很好的使用演示（我不是设计师，这需要我一些时间），但要了解插件的强大功能，您可以查看http://www.tikku.com /jquery-radmenu-plugin#radmenu_tutorial_4用于一些示例。

API 规范在那里并且可供下载。如果你想学习，也可以从 GitHub 上 fork 。https://github.com/nirvanatikku/jQuery-Radmenu-Plugin

如果您有任何问题，请随时联系我

于 2011-05-15T07:25:01.710 回答