aSuncat 2020-05-10
#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>