使用Vue+CSS实现汉堡图标过渡为叉号图标，有点意思

前言

本文给大家分享三个具有过渡效果的汉堡图标，当点击汉堡图标时，过渡为叉号图标。这种具有过渡特效的图标挺炫酷的，感觉一下子给网页增加一点新颖特色。早在2015年左右，国外挺多优秀门户网站都有使用类似的图标，那时不知道怎么实现，现在研究了一下，大概是使用了CSS伪类和动画的技巧来实现。

一、示例代码

（1）/src/views/Example/HamburgerIcon/index.vue

<template>
  <div class="hamburger-icon">
    <div class="hamburger-icon-box">
      <div class="hamburger-1" :class="isActiveHamburger1 ? '' : 'is-active'" @click="isActiveHamburger1 = !isActiveHamburger1">
        <span class="line" />
        <span class="line" />
        <span class="line" />
      </div>
    </div>

    <div class="hamburger-icon-box">
      <div class="hamburger-2" :class="isActiveHamburger2 ? '' : 'is-active'" @click="isActiveHamburger2 = !isActiveHamburger2">
        <span class="line" />
        <span class="line" />
        <span class="line" />
      </div>
    </div>

    <div class="hamburger-icon-box">
      <div class="hamburger-3" :class="isActiveHamburger3 ? '' : 'is-active'" @click="isActiveHamburger3 = !isActiveHamburger3">
        <span class="line" />
        <span class="line" />
        <span class="line" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    isActiveHamburger1: true,
    isActiveHamburger2: true,
    isActiveHamburger3: true,
  }),
  methods: {
   // Todo 
  }
}
</script>

<style lang="less" scoped>
  .hamburger-icon {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #2c3e50;

    .hamburger-icon-box {
      position: relative;
      flex: 1;
      display: table;
      margin: auto;
    }

    /* ---- ^ hamburger-1 ---- */
    .hamburger-1 {
      position: relative;
      width: 100px;
      margin: auto;

      &:hover {
        cursor: pointer;
      }

      .line {
        width: 40px;
        height: 5px;
        background-color: #ffffff;
        border-radius: 5px;
        display: block;
        margin: 7.5px auto;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }

      &.is-active .line:nth-child(1) {
        -webkit-transform: translateY(12.5px) rotate(45deg);
        -ms-transform: translateY(12.5px) rotate(45deg);
        -o-transform: translateY(12.5px) rotate(45deg);
        transform: translateY(12.5px) rotate(45deg);
      }

      &.is-active .line:nth-child(2) {
        opacity: 0;
      }

      &.is-active .line:nth-child(3) {
        -webkit-transform: translateY(-12.5px) rotate(-45deg);
        -ms-transform: translateY(-12.5px) rotate(-45deg);
        -o-transform: translateY(-12.5px) rotate(-45deg);
        transform: translateY(-12.5px) rotate(-45deg);
      }
    }
    /* ---- / hamburger-1 ---- */

    /* ---- ^ hamburger-2 ---- */
    .hamburger-2 {
      position: relative;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;

      &:hover {
        cursor: pointer;
      }

      .line {
        width: 40px;
        height: 5px;
        background-color: #ffffff;
        border-radius: 5px;
        display: block;
        margin: 8px auto;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }

      &:before {
        content: "";
        position: absolute;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 70px;
        height: 70px;
        border: 5px solid transparent;
        top: calc(50% - 35px);
        left: calc(50% - 35px);
        border-radius: 100%;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }

      &.is-active {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
      }

      &.is-active:before {
        border: 5px solid #ecf0f1;
      }

      &.is-active .line {
        width: 35px;
      }

      &.is-active .line:nth-child(1) {
        -webkit-transform: translateY(13px);
        -ms-transform: translateY(13px);
        -o-transform: translateY(13px);
        transform: translateY(13px);
      }

      &.is-active .line:nth-child(2) {
        opacity: 0;
      }

      &.is-active .line:nth-child(3) {
        -webkit-transform: translateY(-13px) rotate(90deg);
        -ms-transform: translateY(-13px) rotate(90deg);
        -o-transform: translateY(-13px) rotate(90deg);
        transform: translateY(-13px) rotate(90deg);
      }
    }
    /* ---- / hamburger-2 ---- */

    /* ---- ^ hamburger-3 ---- */
    .hamburger-3 {
      position: relative;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;

      &:hover {
        cursor: pointer;
      }

      .line {
        width: 40px;
        height: 5px;
        background-color: #ffffff;
        border-radius: 5px;
        display: block;
        margin: 8px auto;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }

      &.is-active {
        animation: smallbig 0.6s forwards;
      }

      &.is-active .line:nth-child(1) {
        -webkit-transform: translateY(13px) rotate(45deg);
        -ms-transform: translateY(13px) rotate(45deg);
        -o-transform: translateY(13px) rotate(45deg);
        transform: translateY(13px) rotate(45deg);
      }

      &.is-active .line:nth-child(2) {
        opacity: 0;
      }

      &.is-active .line:nth-child(3) {
        -webkit-transform: translateY(-13px) rotate(-45deg);
        -ms-transform: translateY(-13px) rotate(-45deg);
        -o-transform: translateY(-13px) rotate(-45deg);
        transform: translateY(-13px) rotate(-45deg);
      }

      .hamburger-3.is-active .line:nth-child(1),
      .hamburger-3.is-active .line:nth-child(2),
      .hamburger-3.is-active .line:nth-child(3) {
        -webkit-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s;
      }

      @keyframes smallbig {
        0%, 100% {
          -webkit-transform: scale(1);
          -ms-transform: scale(1);
          -o-transform: scale(1);
          transform: scale(1);
        }

        50% {
          -webkit-transform: scale(0);
          -ms-transform: scale(0);
          -o-transform: scale(0);
          transform: scale(0);
        }
      }
    }
    /* ---- / hamburger-3 ---- */
  }
</style>

二、运行效果