android 圆形菜单 3d效果,使用SVG制作圆形菜单以及制作圆形菜单动画特效

圆形菜单 3d效果,使用SVG制作圆形菜单以及制作圆形菜单动画特效"/>

android 圆形菜单 3d效果,使用SVG制作圆形菜单以及制作圆形菜单动画特效

圆形菜单是一种非常酷的导航菜单特效，它是一种通过触发按钮将菜单展开为圆形或扇形的一种特效。我们提供了一个小工具可以制作最基本的SVG圆形菜单。通过这个工具，你可以定置你需要的圆形菜单的基本外观，然后将SVG文件下载到本地。

如何使用SVG圆形菜单

现在，你有了最基本的一个圆形菜单的SVG文件，让我们先来看看这个SVG文件。

解析圆形菜单的SVG文件

使用上面的工具制作和下载的SVG圆形菜单文件并不复杂，如果你不需要自定义图标和标签的话基本上不用改动就可以直接使用。

在讲述自定义图标之前，我们先来看一看下载的SVG文件。下面都是一段有5个扇形组成的半圆形菜单的SVG代码。

#menu {

display: block;

margin: 0 auto;

/*overflow: visible;*/ /* uncomment this if you are using bouncing animations*/

}

a {

cursor: pointer; /* SVG elements don't get this by default, so you need to explicitly set it */

outline: none;

}

/* You can change these default styles any way you want */

.item .sector {

transition: all .1s linear;

fill: #fff;

stroke: #111;

}

.item:hover .sector, .item:focus .sector {

fill: #eee;

}

.menu-trigger {

fill: #EA2A55;

pointer-events: auto; /* KEEP THIS to make sure it stays clickable even when SVG's pointer events is disabled */

}

.menu-trigger:hover, .menu-trigger:focus {

cursor: pointer;

}

symbol {

overflow: visible; /* KEEP THIS so that text will not get cut off it it is wider than th