CSS menu button animation

To write a drop-down menu, click the button. The menu entrance is to click an icon button. Before, I used a picture to replace it. Today, I suddenly want to use CSS to write an effect. I mainly refer to the button in the upper right corner of the Pengpai mobile terminal.

Effect:

HTML

    //Change class through click event in vue
    <div 
        class="burger" 
        style="float: right;"
        :class="{'transform':rightTopBtn}"
        @click.stop="rightTopBtn=!rightTopBtn"
    >
        <div></div>
        <div></div>
        <div></div>
    </div>

CSS

  <!--Button container START-->
    .burger {
        cursor: pointer;
        display: inline-block;
        margin: 7px 6px 0 0;
        outline: none;
    }
    <!--Button containerEND-->
    <!--The three horizontal lines are rotated by rotate3d START-->
    .burger div {
        width: 30px;
        height: 4px;
        margin-bottom: 6px;
        background-color: rgb(51, 51, 51);
        transform: rotate3d(0, 0, 0, 0);
    }
    <!--Three horizontal lines END-->
    .burger.transform div {
        background-color: transparent;
    }
    .burger.transform div:first-of-type {
        top: 10px;
        transform: rotate3d(0, 0, 1, 45deg)
    }
    .burger.transform div:last-of-type {
        bottom: 10px;
        transform: rotate3d(0, 0, 1, -45deg)
    }
    <!--The effect of the first and third horizontal lines after clicking START-->
    .burger.transform div:first-of-type, .burger.transform div:last-of-type {
        transition: transform .4s .3s ease, background-color 250ms ease-in;
        background: #00c1de;
    }
    <!--The effect of the first and third horizontal lines after clickingEND-->
    <!--Resume animation after canceling click START-->
    .burger div:first-of-type, .burger div:last-of-type {
        transition: transform .3s ease .0s, background-color 0ms ease-out;
        position: relative;
    }
    <!--Resume animation after canceling clickEND-->

The effect of animation can be achieved by using only transition. By setting the changes of different attributes and mastering the change time and delay time, the animation can be arranged in sequence.

Summarize

The above is the CSS menu button animation that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time!

<<: IE6 space bug fix method

>>: Docker implements container port binding local port