实现效果

效果转换过程中会转圈变化

初始化

点击之后

代码实现

结构

<div class="fold-menu fold-menu--spin-r" style="display: none">
    <div class="fold-menu-box">
        <div class="fold-menu-inner">

        </div>
    </div>
</div>

样式

/*对整个盒子进行定义*/
.fold-menu-box {
  width: 25px;
  height: 20px;
  display: inline-block;
  position: relative;
}

/*画的是中间的线*/
.fold-menu-inner {
  top: 50%;
  margin-top: -2px;
}

/*三条线的样式*/
.fold-menu-inner, .fold-menu-inner::after, .fold-menu-inner::before {
  width: 25px;
  height: 3px;
  display: block;
  background-color: grey;
  border-radius: 4px;
  position: absolute;
  /*把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果：*/
  /*定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔，详细见末尾*/
  transition-property: transform,-webkit-transform;
  transition-duration: .15s;
  /*ease：规定慢速开始，然后变快，然后慢速结束的过渡效果*/
  transition-timing-function: ease;
}

/*对中间的线进行样式的修改*/
.fold-menu--spin-r .fold-menu-inner {
  transition-duration: .3s;
  /*在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。*/
  transition-timing-function: cubic-bezier(.55,.055,.675,.19);
}

/*上下两条线的样式*/
.fold-menu-inner::after, .fold-menu-inner::before {
  content: "";
}

/*对第一条线的样式修改*/
.fold-menu--spin-r .fold-menu-inner::before {
  transition: top .1s .34s ease-in,opacity .1s ease-in;
  top: -7px;
}

/*对第三条线进行样式修改*/
.fold-menu-inner::after {
  bottom: -7px;
}

/*is-active加在fold-menu上*/
.is-active .fold-menu-inner {
  background-color:grey;
  -webkit-transform:rotate(-225deg);
  transform:rotate(-225deg);
  transition-delay:.14s;
  transition-timing-function:cubic-bezier(.215,.61,.355,1)
}

/*隐藏第一条线*/
.is-active .fold-menu-inner::before {
  top:0;
  opacity:0;
  transition:top .1s ease-out,opacity .1s .14s ease-out
}

/*对第三条线进行操作*/
.is-active .fold-menu-inner::after {
  background-color:grey;
  bottom:0;
  -webkit-transform:rotate(-90deg);
  transform:rotate(-90deg);
  transition:bottom .1s ease-out,transform .3s .14s cubic-bezier(.215,.61,.355,1),-webkit-transform .3s .14s cubic-bezier(.215,.61,.355,1)
}

点击事件

// 移动端导航栏
$('.fold-menu').click(function(){
    $(this).stop().toggleClass("is-active");
    // 对移动列表添加类，让其显示
    $('.nav-mobile').stop().toggleClass('actived');
})

对css样式的解释补充