0
所以,我试图让一个复选框,选中时,菜单将淡入和动画完成后,该文本开始淡入 的问题是,当。我试着CSS文本类,它只是不会给“选中”属性附加伤害作出回应。CSS过渡 - 幻灯片菜单第一,褪色的文字后
我想点击该按钮,
/* MENU */
.nav-a {
display: block;
text-align: center;
text-decoration: none;
opacity: 0;
transition: opacity 0.4s 1s;
}
input[type=checkbox]:checked ~ .nav-a {
opacity: 1;
}
#nav-li {
float: right;
display: inline-block;
height: 50px;
line-height: 50px;
width: 100px;
}
#nav-ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav {
background-color: #707068;
position: absolute;
top: 0;
width: 250px;
height: 50px;
z-index: -1;
opacity: 0;
transition: opacity 1s, transform 1s;
}
input[type=checkbox]:checked ~ #nav {
opacity: 1;
}
/* BOTAO MENU */
input[type=checkbox] {
position: absolute;
opacity: 0;
}
label {
position: absolute;
z-index: 1;
font-family:monospace;
font-size: 60px;
line-height: 38px;
height: 30px;
width: 30px;
color: #707068;
cursor: pointer;
left: 10px;
}
input[type=checkbox]:checked ~ label {
color: #9a9a8d;
}
<div id="wrapper-menu">
<input id="menu" type="checkbox"><label for="menu">≡</label>
<nav id="nav">
<ul id="nav-ul">
<li id="nav-li"><a class="nav-a" href="">projetos</a></li>
<li id="nav-li"><a class="nav-a" href="">perfil</a></li>
</ul>
</nav>
</div>
什么并不完全工作? – cesare