Question

我正在尝试创建一个角圆菜单，如下图所示：

这是我尝试过并取得的成就：

＆＃13;

 Bundle optsBundle = null;
            ActivityOptions opts = null;
            if (Utilities.ATLEAST_MARSHMALLOW) {
                int left = 0, top = 0;
                int width = v.getMeasuredWidth(), height = v.getMeasuredHeight();
//                    if (v instanceof TextView) {
//                        // Launch from center of icon, not entire view
//                        Drawable icon = Workspace.getTextViewIcon((TextView) v);
//                        if (icon != null) {
//                            Rect bounds = icon.getBounds();
//                            left = (width - bounds.width()) / 2;
//                            top = v.getPaddingTop();
//                            width = bounds.width();
//                            height = bounds.height();
//                        }
//                    }
                opts = ActivityOptions.makeClipRevealAnimation(v, left, top, width, height);
            } else if (!Utilities.ATLEAST_LOLLIPOP) {
                // Below L, we use a scale up animation
                opts = ActivityOptions.makeScaleUpAnimation(v, 0, 0, v.getMeasuredWidth(), v.getMeasuredHeight());
            } else if (Utilities.ATLEAST_LOLLIPOP_MR1) {
                // On L devices, we use the device default slide-up transition.
                // On L MR1 devices, we use a custom version of the slide-up transition which
                // doesn't have the delay present in the device default.
                opts = ActivityOptions.makeCustomAnimation(context, R.anim.task_open_enter, R.anim.no_anim);
            }
            optsBundle = opts != null ? opts.toBundle() : null;

            context.startActivity(intent, optsBundle);

＆＃13;

$(".menu").click(function(){
    $(".menu-items").fadeToggle();
});

＆＃13;

html,body{
	color:#000;
}

.menu{
	position:fixed;
	left:-100px;
	top:-100px;
	z-index:9999 !important;
	width:200px;
	height:200px;
	border-radius:50%;
	background-color:#3F51B5;
}

.menu .menu-btn{
	position:absolute;
	bottom:50px;
	right:50px;
}

.menu-items{
	position:fixed;
	top:-100;
	left:-100;
	z-index:9990 !important;
	width:250px;
	height:250px;
	background:#2979FF;
	border-radius:50%;
}

＆＃13;

我一直试图在2天内实现这一目标，但无法找到任何相关的代码或想法或逻辑。请任何人解释/指导我这个设计背后的数学和css吗？

Answer 1

创建菜单项的关键是将它们放在圆形div中，并将圆形div设置为隐藏溢出，旋转它们中的每一个并使它们倾斜。查看本教程：http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/

Corner Circle菜单CSS和jQuery

1 个答案: