CSS implementation of menu button animation

Time:2020-2-16

To write a pull-down menu, click a button, and the menu entry is to click an icon button. Before you click an icon button, you just use a picture instead of today’s CSS. I want to write an effect by referring to the button in the upper right corner of the surging mobile terminal

Effect:

HTML

//Change class by clicking 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 container end -- >
    <! -- three horizontal lines realize rotation start through rotate3d -- >
    .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)
    }
    <! -- 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;
    }
    <! -- effect end of the first and third horizontal lines after clicking -- >
    <! -- cancel clicking and restore animation start -- >
    .burger div:first-of-type, .burger div:last-of-type {
        transition: transform .3s ease .0s, background-color 0ms ease-out;
        position: relative;
    }
    <! -- cancel clicking and restore animation end -- >

Only transition can achieve the effect of animation. By setting the change of different attributes and mastering the change time and delay time, the animation can be sequenced

summary

The above is the CSS implementation menu button animation introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave me a message, and Xiaobian will reply you in time!

Recommended Today

[Redis5 source code learning] analysis of the randomkey part of redis command

baiyan Command syntax Command meaning: randomly return a key from the currently selected databaseCommand format: RANDOMKEY Command actual combat: 127.0.0.1:6379> keys * 1) “kkk” 2) “key1” 127.0.0.1:6379> randomkey “key1” 127.0.0.1:6379> randomkey “kkk” Return value: random key; nil if database is empty Source code analysis Main process The processing function corresponding to the keys command is […]