苹果css

Posted 2020-12-15 jaycethanks

#toggler{
    /*1*/
    display:none;
    
  }
  .hamburger-container{
    /*2*/
    width:20px;
    height:20px;
    background-color:#000;
    /*2*/
    position:relative;/*9这样就可以设定top使得它向下移动,position的默认值是static*/
    top:16px;/*9.1*/
  }
  /* 4 */
  header{
    background-color:#000;/*4.1*/
    height:44px;/*4.2*/
    padding:0 18px;/*8*/
  }
  /* 5 */
  body{
    padding:0;
    margin:0;
  }
  /* 6 */
  .hamburger-container span{
    display:block;/* span原本行内元素 *//*6.1*/
    height:1px;/*6.2*/
    background-color:#fff;/*6.3*/
    position:relative;/*10.2*/
    /*11.2*/
/*     transition:all .3s ease-in-out; */
    transition:transform .1s ease-in-out, top .1s ease-in-out .1s;
    top:0;/*11.3*/
  }

/* 7这时候两条线会重合在一起，我们将他们分开 */
.hamburger-container span:nth-child(2){
  margin-top:7px;
}


/* 10设定当被点击的时候，两条线交叉 */
#toggler:checked + label .hamburger-container span:nth-child(1){
  transform:rotate(45deg);
  top:4px;/*下移一点点，需要回到上面把span的position设定为relative才会生效 10.1*/
  /*12.1*/
  transition:top .1s ease-in-out,transform 0.1s ease-in-out .1s;
}

/* 11另一条线相反 */
#toggler:checked + label .hamburger-container span:nth-child(2){
  transform:rotate(-45deg);
  top:-4px;/*下移一点点，需要回到上面把span的position设定为relative才会生效 11.1*/
    /*12.2*/
  transition:top .1s ease-in-out,transform 0.1s ease-in-out .1s;
  
}

<!-- 3 -->
<header>
  <input type="checkbox" id="toggler">

  <label for="toggler">
    <div class="hamburger-container"</div>
    <span></span>
    <span></span>
  </label>
</header>