css实现右上角按钮点击弹出圆环形子菜单效果代码-html代码-BFW代码库

css实现右上角按钮点击弹出圆环形子菜单效果代码

代码语言：html

代码描述：css实现右上角按钮点击弹出圆环形子菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

    <style>
        html,body {
	height:100%;
}
body {
	background:beige;
	font-family:Alegreya Sans,sans-serif;
}
nav {
	display:block;
	position:fixed;
	width:500px;
	height:500px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-transform:translate3d(25px,-25px,0);
	transform:translate3d(25px,-25px,0);
	-webkit-transition:-webkit-transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
	transition:-webkit-transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
	transition:transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
	transition:transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9),-webkit-transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
}
nav.open {
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
}
nav.top-right {
	top:-140px;
	right:-140px;
}
.disc {
	position:absolute;
	display:inline-block;
	text-align:center;
	cursor:pointer;
	font:25px Alegreya Sans,sans-serif;
	line-height:40px;
	padding-top:10px;
	border-radius:250px;
	-webkit-transform:scale3d(0.5,0.5,0.5) rotate3d(0,0,1,190deg);
	transform:scale3d(0.5,0.5,0.5) rotate3d(0,0,1,190deg);
	pointer-events:none;
	opacity:0;
	cursor:pointer;
	-webkit-transition:opacity 0.5s,-webkit-transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
	transition:opacity 0.5s,-webkit-transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
	transition:transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9),opacity 0.5s;
	transition:transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9),opacity 0.5s,-webkit-transform 0.5s cubic-bezier(0.3,1.4,0.5,0.9);
}
.disc div {
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
}
.open .disc {
	pointer-events:auto;
	opacity:1;
}
.l1 {
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background:tomato;
	-webkit-transition-delay:0s;
	transition-delay:0s;
}
.open .l1 {
	-webkit-transition-delay:0s;
	transition-delay:0s;
	-webkit-transform:scale3d(1,1,1) rotate3d(0,0,1,190deg);
	transform:scale3d(1,1,1) rotate3d(0,0,1,190deg);
	opacity:1;
}
.open .l1:hover {
	background:#1a0a07;
	color:tomato;
	-webkit-transition-delay:0s;
	transition-delay:0s;
}
.open .l1:active {
	background:#803224;
	color:tomato;
}
.open .l1.toggle {
	-webkit-transform:scale3d(0.9,0.9,0.9) rotate3d(0,0,1,10deg);
	transform:scale3d(0.9,0.9,0.9) rotate3d(0,0,1,10deg);
}
.l2 {
	top:50px;
	left:50px;
	right:50px;
	bottom:50px;
	background:#ff7a39;
	-webkit-transition-delay:0.1s;
	transition-delay:0.1s;
}
.open .l2 {
	-webkit-transition-delay:0.1s;
	transition-delay:0.1s;
	-webkit-transform:scale3d(1,1,1) rotate3d(0,0,1,190deg);
	transform:scale3d(1,1,1) rotate3d(0,0,1,190deg);
	opacity:1;
}
.open .l2:hover {
	background:#1a0c06;
	color:#ff7a39;
	-webkit-transition-delay:0s;
	transition-delay:0s;
}
.open .l2:active {
	background:#803d1d;
	color:#ff7a39;
}
.open .l2.toggle {
	-webkit-transform:scale3d(0.9,0.9,0.9) rotate3d(0,0,1,10deg);
	transform:scale3d(0.9,0.9,0.9) rotate3d(0,0,1,10deg);
}
.l3 {
	top:100px;
	left:100px;
	right:100px;
	bottom:100px;
	background:#ff912b;
	-webkit-transition-delay:0.2s;
	transition-delay:0.2s;
}
.open .l3 {
	-webkit-transition-delay:0.2s;
	transition-delay:0.2s;
	-webkit-transform:scale3d(1,1,1) rotate3d(0,0,1,190deg);
	transform:scale3d(1,1,1) rotate3d(0,0,1,190deg);
	opacity:1;
}
..........完整代码请登录后点击上方下载按钮下载查看