# 超酷的jQuery/CSS3五彩环形弹出菜单DEMO演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超酷的jQuery/CSS3五彩环形弹出菜单DEMO演示</title>
<style>
.menu, .button {
width: 100px;
height: 100px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.menu {
margin-top: 287px;
margin-left: 230px;
-webkit-transition: -webkit-transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92);
transition: -webkit-transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92);
transition: transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92);
transition: transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92), -webkit-transform 1.125s cubic-bezier(0.39, 1.52, 0.46, 0.92);
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transform-origin: top left;
transform-origin: top left;
cursor: pointer;
}
.button {
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
mix-blend-mode: multiply;
background-position: center center;
background-repeat: no-repeat;
background-size: 33%;
font: 25px/100px Alegreya Sans, sans-serif;
-webkit-transition: -webkit-transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92);
transition: -webkit-transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92);
transition: transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92);
transition: transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92), -webkit-transform 0.75s cubic-bezier(0.39, 1.52, 0.46, 0.92);
will-change: transform;
}
.button.closed {
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
}
.main {
color: #030f01;
text-align: center;
mix-blend-mode: normal;
line-height: 100px;
-webkit-box-shadow: 0 0 0 5px rgba(3, 15, 1, 0.1);
box-shadow: 0 0 0 5px rgba(3, 15, 1, 0.1);
-webkit-transition: border-color 0.75s, color 0.75s;
transition: border-color 0.75s, color 0.75s;
will-change: color, border-color, background;
}
.closed .main {
color: #f8f7f2;
-webkit-box-shadow: 0 0 0 5px rgba(3, 15, 1, 0);
box-shadow: 0 0 0 5px rgba(3, 15, 1, 0);
}
.blue {
background-color: #1ba5cd;
top: -180%;
left: 0%;
/*background-image: url(bookmark.svg);*/
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.hover .blue {
background-color: #1ba5cd;
top: -173%;
left: 0%;
/*background-image: url(bookmark.svg);*/
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.closed .blue {
-webkit-transform: translate3d(0%, 191%, 0) rotate(-180deg);
transform: translate3d(0%, 191%, 0) rotate(-180deg);
}
.green {
background-color: #1ab254;
top: -57%;
left: 168%;
/*background-image: url(music.svg);*/
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.hover .green {
background-color: #1ab254;
top: -54%;
left: 158%;
/*background-image: url(music.svg);*/
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.closed .green {
-webkit-transform: translate3d(-179%, 61%, 0) rotate(-180deg);
transform: translate3d(-179%, 61%, 0) rotate(-180deg);
}
.yellow {
background-color: #fec72e;
top: 145%;
left: 102%;
/*background-image: url(messages.svg);*/
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.hover .yellow {
background-color: #fec72e;
top: 137%;
left: 99%;
/*background-image: url(messages.svg);*/
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.closed .yellow {
-webkit-transform: translate3d(-111%, -154%, 0) rotate(-180deg);
transform: translate3d(-111%, -154%, 0) rotate(-180deg);
}
.orange {
background-color: #fa7d39;
top: 145%;
left: -108%;
/*background-image: url(places.svg);*/
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.hover .orange {
background-color: #fa7d39;
top: 140%;
left: -102%;
/*background-image: url(places.svg);*/
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.closed .orange {
-webkit-transform: translate3d(115%, -155%, 0) rotate(-180deg);
transform: translate3d(115%, -155%, 0) rotate(-180deg);
}
.red {
background-color: #ee5656;
top: -57%;
left: -172%;
/*background-image: url(home.svg);*/
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.hover .red {
background-color: #ee5656;
top: -52%;
left: -166%;
/*background-image: url(home.svg);*/
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.closed .red {
-webkit-transform: translate3d(182%, 61%, 0) rotate(-180deg);
transform: translate3d(182%, 61%, 0) rotate(-180deg);
}
</style>
</head>
<body>
<div id="in" class='menu closed' onmouseover='$("#in").toggleClass("hover");' onmouseout='$("#in").toggleClass("hover");'>
<div class='yellow button'></div>
<div class='green button'></div>
<div class='blue button'></div>
<div class='orange button'></div>
<div class='red button'></div>
<div class='main button'>Menu</div>
</div>
<script src='static/js/jquery-2.2.4.min.js'></script>
<script>
$(".menu").mousedown(function(){
$(this).toggleClass("closed");
if($(this).hasClass("closed")) {
$(".main.button").text("Menu");
} else {
$(".main.button").text("Close");
}
});
</script>
</body>
</html>