CSS 过渡 - 先滑动菜单,然后淡入淡出文本
CSS transition - Slide menu first, fade text later
因此,我正在尝试制作一个复选框,当检查菜单时,动画完成后会逐渐消失,文本开始褪色。
问题是,当我尝试 css 文本 class 时,它不会响应 "checked" 属性。
我想点击按钮,
/* 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>
因为您使用的是通用同级组合符 (~),所以您不能直接定位 .nav-a
。您需要将它的父对象作为复选框的同级对象,例如 #nav
。请参阅下面的演示。
/* MENU */
.nav-a {
display: block;
text-align: center;
text-decoration: none;
opacity: 0;
transition: opacity 0.4s 1s;
}
input[type=checkbox]:checked ~ #nav .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>
因此,我正在尝试制作一个复选框,当检查菜单时,动画完成后会逐渐消失,文本开始褪色。 问题是,当我尝试 css 文本 class 时,它不会响应 "checked" 属性。
我想点击按钮,
/* 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>
因为您使用的是通用同级组合符 (~),所以您不能直接定位 .nav-a
。您需要将它的父对象作为复选框的同级对象,例如 #nav
。请参阅下面的演示。
/* MENU */
.nav-a {
display: block;
text-align: center;
text-decoration: none;
opacity: 0;
transition: opacity 0.4s 1s;
}
input[type=checkbox]:checked ~ #nav .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>