我试图让菜单按钮变成X，当复选框切换被选中时，就像在菜单栏上悬停时一样。但是，似乎只有bar1可以动画并形成X形状，bar2 & bar3返回到它们的原始位置。谁能帮帮我？
#toggle {
position: absolute;
}
.bar1 {
width: 2rem;
height: 3px;
top: 30%;
position: absolute;
background-color: #0AF;
transition: ease-in-out 500ms;
}
.bar2 {
width: 2rem;
height: 3px;
top: 50%;
transform: translateY(-50%);
position: absolute;
background-color: #0AF;
transition: ease-in-out 200ms;
}
.bar3 {
width: 2rem;
height: 3px;
bottom: 30%;
position: absolute;
background-color: #0AF;
transition: ease-in-out 500ms;
}
.btn-menu:hover .bar1,
#toggle:checked+.bar1 {
transform: rotate(45deg);
top: 45%;
}
.btn-menu:hover .bar2,
#toggle:checked+.bar2 {
transform: translateX(50px);
opacity: 0;
top: 45%;
}
.btn-menu:hover .bar3,
#toggle:checked+.bar3 {
transform: rotate(-45deg);
bottom: 45%;
}<body>
<div class="container">
<label class="btn-menu" for="toggle">
<input type="checkbox" id="toggle">
<div class="bar1"> </div>
<div class="bar2"> </div>
<div class="bar3"> </div>
</label>
</div>
</body>用~代替+
.btn-menu:hover .bar1,
#toggle:checked~.bar1 {
transform: rotate(45deg);
top: 45%;
}
.btn-menu:hover .bar2,
#toggle:checked~.bar2 {
transform: translateX(50px);
opacity: 0;
top: 45%;
}
.btn-menu:hover .bar3,
#toggle:checked~.bar3 {
transform: rotate(-45deg);
bottom: 45%;
}
删除这3个类中的'+'。
.btn-menu:hover .bar1,
#toggle:checked .bar1 {
transform: rotate(45deg);
top: 45%;
}
.btn-menu:hover .bar2,
#toggle:checked .bar2 {
transform: translateX(50px);
opacity: 0;
top: 45%;
}
.btn-menu:hover .bar3,
#toggle:checked .bar3 {
transform: rotate(-45deg);
bottom: 45%;
}你必须用'~'来代替'+'，并且在选择符之间加上空格，这样才行。
#toggle:checked ~ .bar1 {
transform: rotate(45deg);
top: 45%;
}
#toggle:checked ~ .bar2 {
transform: translateX(50px);
opacity: 0;
top: 45%;
}
#toggle:checked ~ .bar3 {
transform: rotate(-45deg);
bottom: 45%;
}
另外，为了让你的代码更清晰，我建议你把具有相同属性的选择器分成一组，就像这样。
.bar1,.bar2,.bar3 {
position: absolute;
width: 2rem;
height: 3px;
background-color: #0AF;
}
.bar1 {
top: 30%;
transition: ease-in-out 500ms;
}
.bar2 {
top: 50%;
transform: translateY(-50%);
transition: ease-in-out 200ms;
}
.bar3 {
bottom: 30%;
transition: ease-in-out 500ms;
}