jquery - 在 HTML5 CSS3 中实现一个椭圆菜单

Question

我想使用类似这样的 CSS3 转换动画来实现这种类型的菜单。

第一个问题是:这可行吗？

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

Answer 1

您可以在菜单图像上映射区域以用作链接:

示例代码和演示:

请以全页模式运行此演示

body{ background-color: ivory; }
input[type='text']:focus{background:red;}
input[type='text']:blur{background:white;}

<img src="https://dl.dropboxusercontent.com/u/139992952/multple/menu.png" usemap="#green" border="0">
<map name="green">
<area shape="rect" coords="69,33,117,88" href="#m1">
<area shape="rect" coords="192,4,241,60" href="#m2">
<area shape="rect" coords="329,25,389,83" href="#m3">
<area shape="rect" coords="364,138,422,197" href="#m4">
<area shape="rect" coords="232,188,287,243" href="#m5">
<area shape="rect" coords="81,181,148,238" href="#m6">
</map>
<br>menu item 1:<input type=text id=m1>
<br>menu item 2:<input type=text id=m2>
<br>menu item 3:<input type=text id=m3>
<br>menu item 4:<input type=text id=m4>
<br>menu item 5:<input type=text id=m5>
<br>menu item 6:<input type=text id=m6>