纯css实现简易菜单开关样式（平行线相交）样式切换

纯css实现简易菜单开关样式（平行线相交）样式切换

效果：

  <div class="right-menu">
      <div></div>
      <div></div>
    </div>

Html部分，主要是一个box，里面放两个dom，实现常规等号样式，再通过css实现=与×的交替效果

 .right-menu {
    position: relative;
    padding: 20px 12px;
    width: 50px;
    height: 100%;
    & div {
      position: absolute;
      width: 20px;
      height: 2px;
      background: white;
    }
    :first-child{
        transition: all ease 1s;
    }
    :last-child{
        margin-top: 10px;
        transition: all ease 1s;
    }
    &:hover :first-child {
      transform: rotate(-45deg);
      transition: all ease 1s;
      margin-top: 0;
    }
    &:hover :nth-child(2) {
      transform: rotate(45deg);
      transition: all ease 1s;
      margin-top: 0;
    }
  }

css部分，绝对定位把等号放到想要的位置，margin-top：给一个间距（实现平行线相交动效需要），当:hover时，把第一条平行线向下旋转45°，第二条平行线移除边距，同时向上旋转45°，实现平行线相交效果。transition 给个过度效果，让动效更加丝滑！！

！！！就非常的简单

同理，也可以用js实现

把hover效果换成js样式添加就行 简单好看(๑•̀ㅂ•́)و✧

更新-------------------------------------------------

用vue实现

  <div @click="change" :class="rightmenuClass">
      <div></div>
      <div></div>
    </div>

添加点击事件 动态改变class类

 data() {
    return {
      rightmenuClass:{rightMenu:true,closeMenu:false} //感觉用对象比数组方便，直接!closeMenu
    };
  },
   methods:{
    change(){
     this.rightmenuClass.closeMenu=!this.rightmenuClass.closeMenu
    }
    }

css 把hover改变效果单独拎出来 改个名

 .closeMenu {
    :first-child {
      transition: all ease 1s;
      transform: rotate(-45deg);
    }
    :last-child {
      transform: rotate(45deg);
      transition: all ease 1s;
      margin-top: 0;
    }
  }

jq 的话 用自带的toggleClass方法 应该很方便 大概是这样

$('dom').click(function(){
$(this).toggleClass(closeMenu)
})

原生js
用addClass() removeClass() 在加一个开关值，判断打开