天天看點

html隐藏菜單特效,javascript+css3 實作動态按鈕菜單特效

一個菜單按鈕特效案例,簡單的實作了動态效果。

廢話不多說了,直接給大家貼代碼了,代碼寫好不好,還請給位大俠多多指教。

.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";

}

}

}

以上代碼簡單實作了動态按鈕菜單特效,希望對大家有所幫助。