/*三条线*/ .hamburger { display:inline-block; cursor:pointer; transition-property:opacity,-webkit-filter; transition-property:opacity,filter; transition-property:opacity,filter,-webkit-filter; transition-duration:.15s; transition-timing-function:linear; font:inherit; color:inherit; text-transform:none; background-color:transparent; border:0; margin:0; overflow:visible; position:absolute; top:7%; left:3% } .hamburger--spin .hamburger-inner { transition-duration:.3s; transition-timing-function:cubic-bezier(.55,.055,.675,.19) } .hamburger--spin .hamburger-inner { transition-duration:.3s; transition-timing-function:cubic-bezier(.55,.055,.675,.19) } .hamburger-inner,.hamburger-inner::after,.hamburger-inner::before { width:30px; height:2px; background-color:#2e4139; border-radius:4px; position:absolute; transition-property:-webkit-transform; transition-property:transform; transition-property:transform,-webkit-transform; transition-duration:.15s; transition-timing-function:ease } .hamburger-inner { display:block; top:50%; margin-top:-2px } .hamburger--spin .hamburger-inner::before { transition:top .1s .34s ease-in,opacity .1s ease-in } .hamburger--spin .hamburger-inner::before { transition:top .1s .34s ease-in,opacity .1s ease-in } .hamburger-inner::before { top:-10px } .hamburger-inner::after,.hamburger-inner::before { content:""; display:block } .hamburger--spin .hamburger-inner::after { transition:bottom .1s .34s ease-in,-webkit-transform .3s cubic-bezier(.55,.055,.675,.19); transition:bottom .1s .34s ease-in,transform .3s cubic-bezier(.55,.055,.675,.19); transition:bottom .1s .34s ease-in,transform .3s cubic-bezier(.55,.055,.675,.19),-webkit-transform .3s cubic-bezier(.55,.055,.675,.19) } .hamburger--spin .hamburger-inner::after { transition:bottom .1s .34s ease-in,-webkit-transform .3s cubic-bezier(.55,.055,.675,.19); transition:bottom .1s .34s ease-in,transform .3s cubic-bezier(.55,.055,.675,.19); transition:bottom .1s .34s ease-in,transform .3s cubic-bezier(.55,.055,.675,.19),-webkit-transform .3s cubic-bezier(.55,.055,.675,.19) } .hamburger-inner::after { bottom:-10px } .hamburger-inner::after,.hamburger-inner::before { content:""; display:block } .hamburger--spin.is-active .hamburger-inner { -webkit-transform:rotate(225deg); transform:rotate(225deg); transition-delay:.14s; transition-timing-function:cubic-bezier(.215,.61,.355,1) } .hamburger--spin.is-active .hamburger-inner::before { top:0; opacity:0; transition:top .1s ease-out,opacity .1s .14s ease-out } .hamburger--spin.is-active .hamburger-inner::after { bottom:0; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); transition:bottom .1s ease-out,-webkit-transform .3s .14s cubic-bezier(.215,.61,.355,1); transition:bottom .1s ease-out,transform .3s .14s cubic-bezier(.215,.61,.355,1); transition:bottom .1s ease-out,transform .3s .14s cubic-bezier(.215,.61,.355,1),-webkit-transform .3s .14s cubic-bezier(.215,.61,.355,1) }