操作复选框以在未选中时旋转 CSS

Question

我用 checkbox 制作了一个移动导航，以便有一个下拉菜单。当checkbox勾选（nav是'open'），它旋转180度，所以箭头朝上。当我点击它时，我想向后产生同样的效果。问题是我不知道如何达到 checkbox:unchecked 这样的状态（这没有意义，因为默认情况下未选中复选框，否则您没有在 [=41= 中定义已选中]) 还是我应该使用 :after?

我尝试过类似的方法但没有成功（我想我没有使用正确的语法）

     #menu-toggle:checked~label i  {    /*Rotates when checked*/
     
         transform: rotate(180deg);
         transition: all ease-in-out .3s
      }

     #menu-toggle:checked:after~label i  {  /*My trial to reach the same reverse rotation when unchecked*/
         transform: rotate(-180deg);
         transition: all ease-in-out .3s
      }

1.Arrow 默认状态：

选中时箭头朝上：

现在只有 CSS，没有 JS 或 jQuery。谢谢！

Answer 1

它实际上非常简单，默认情况下，元素上的 transition 确保任何类型的更改都能顺利进行，从初始到所需以及向后。当 checked:

时，您只需要 rotate

#menu-toggle ~ label i {
  transition: all ease-in-out .3s;
}

#menu-toggle:checked ~ label i {
  transform: rotate(-180deg);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<input type="checkbox" id="menu-toggle">
<label>
  <i class="fa fa-angle-down" aria-hidden="true"></i>
</label>

操作复选框以在未选中时旋转 CSS

Manipulate a checkbox to have CSS rotate when unchecked

html

css

checkbox

rotation

unchecked