console
var wrap = $('.wrapper');
setTimeout(function () {change()}, 300);
wrap.on('click',function () {
change();
})
function change() {
$('div').toggleClass("open");
var oLi = $('li');
var len = oLi.length;
var deg = 360 / len;
for(var i = 0; i < len; i++){
var po = deg * i;
$('div').hasClass('open')? rotateZ(oLi[i],po) : rotateZ(oLi[i],-360);
}
}
function rotateZ(dom,deg) {
$(dom).css({
'transform' : 'rotateZ(' + deg + 'deg)'
})
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>动画菜单</title>
</head>
<body>
<div class="wrapper">
<ul>
<li>
<div>unit 1</div>
</li>
<li>
<div>unit 2</div>
</li>
<li>
<div>unit 3</div>
</li>
<li>
<div>unit 4</div>
</li>
<li>
<div>unit 5</div>
</li>
<li>
<div>unit 6</div>
</li>
<li>
<div>unit 7</div>
</li>
<li>
<div>unit 8</div>
</li>
</ul>
<div class="btn">Click</div>
</div>
<script src="jquery.js"></script>
<script src="demo.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
list-style: none;
}
html , body{
width: 100%;
height: 100%;
background: linear-gradient(#fff, #000);
}
.wrapper{
width: 180px;
height: 180px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -90px;
margin-top: -90px;
}
.btn{
width: 100%;
height: 100%;
background-color: deeppink;
color: #fff;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 180px;
border-radius: 50%;
box-shadow: 8px 13px 10px rgba(0,0,0,0.2);
cursor: pointer;
position: absolute;
top: 0;
left: 0;
}
.btn:hover{
background-color: #A20055;
color: orange;
}
.wrapper ul{
position: relative;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.wrapper ul li{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.8s;
}
.wrapper ul li div{
width: 0px;
height: 0px;
background-color: snow;
position: absolute;
top: -120px;
left: 50%;
font-size: 0px;
margin-left: -40px;
border-radius: 50%;
text-align: center;
line-height: 0px;
cursor: pointer;
transition: all 0.8s, color 0.1s,background 0.1s;
}
.open ul li div{
width: 80px;
height: 80px;
font-size: 12px;
line-height: 80px;
transition: all 0.8s ,color 0.1s,background 0.1s;
}
.wrapper ul li div:hover{
color: orange;
}