Maison  >  Article  >  interface Web  >  javascript+css3 implémente les compétences d'effets de menu de boutons dynamiques_javascript

javascript+css3 implémente les compétences d'effets de menu de boutons dynamiques_javascript

WBOY
WBOYoriginal
2016-05-16 15:16:032244parcourir

Un boîtier d'effets spéciaux de bouton de menu qui implémente simplement des effets dynamiques.

Sans plus tarder, je publierai le code directement pour vous. Veuillez me donner quelques conseils pour savoir si le code est bon ou non.

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

Le code ci-dessus implémente simplement les effets de menu de boutons dynamiques. J'espère qu'il sera utile à tout le monde.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn