javascript+css3 实现动态按钮菜单特效
一个菜单按钮特效案例,简单的实现了动态效果。
废话不多说了,直接给大家贴代码了,代码写好不好,还请给位大侠多多指教。
<divclass="bar"id="menubar"> <divclass="menu"id="menu0"> </div> <divclass="menu"id="menu1"> </div> <divclass="menu"id="menu2"> </div> </div> .bar{ width:px; height:px; border:pxsolid#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.scubic-bezier(.,.,.,.)s } #menu{ top:%; } #menu{ top:%; } #menu{ top:%; } window.onload=function(){ varmenubar=document.getElementById("menubar"); varmenu=document.getElementById("menu"); varmenu=document.getElementById("menu"); varmenu=document.getElementById("menu"); vari=; 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"; } } }
以上代码简单实现了动态按钮菜单特效,希望对大家有所帮助。