一个菜单按钮特效案例，简单的实现了动态效果。

废话不多说了，直接给大家贴代码了，代码写好不好，还请给位大侠多多指教。

<div class="bar" id="menubar">

<div class="menu" id="menu0">

</div>

<div class="menu" id="menu1">

</div>

<div class="menu" id="menu2">

</div>

</div>

.bar{

width:px;

height:px;

border:px solid #ccc;

border-radius:%;

position:fixed;

top:px;

right:px;

z-index:;

cursor:pointer;

}

.menu{

width:px;

height:px;

background-color:#ccc;

position:absolute;

transform:translated(-%,-%,);

left:%;

transition:all .s cubic-bezier(., ., ., .) s

}

#menu{

top:%;

}

#menu{

top:%;

}

#menu{

top:%;

}

window.onload = function () {

var menubar = document.getElementById("menubar");

var menu = document.getElementById("menu");

var menu = document.getElementById("menu");

var menu = document.getElementById("menu");

var i = ;

menubar.onclick = function () {

i++;

if (i % == ) {

menu.style.top = + "%";

menu.style.display = "none";

menu.style.top = + "%";

menu.style.transform = "translated(-%,-%,) rotate(deg)";

menu.style.transform = "translated(-%,-%,) rotate(deg)";

}

else {

menu.style.transform = "translated(-%,-%,) rotate(deg)";

menu.style.transform = "translated(-%,-%,) rotate(deg)";

menu.style.top = + "%";

menu.style.top = + "%";

menu.style.display = "block";

}

}

}

以上代码简单实现了动态按钮菜单特效，希望对大家有所帮助。