在 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>

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

implement an elliptic Menu in HTML5 CSS3

css

jquery

html5-canvas