CSS code example for menu button animation-CSS Tutorial-php.cn

CSS code example for menu button animation

不言

Release： 2019-04-13 11:50:37

forward

2417 people have browsed it

The content of this article is about the code example of CSS to implement menu button animation. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

To write a drop-down menu, click the button. The menu entrance is to click an icon button. Before, I used a picture instead. Today, I suddenly want to use CSS to write an effect. The main reference is the button in the upper right corner of The Paper mobile terminal

Effect:

CSS code example for menu button animation ##HTML

    //vue 中通过点击事件改变class
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>

Copy after login

CSS

    <!--按钮容器 START-->
    .burger {
        cursor: pointer;
        display: inline-block;
        margin: 7px 6px 0 0;
        outline: none;
    }
    <!--按钮容器 END-->
    
    <!--三条横线 通过rotate3d实现旋转 START-->
    .burger p {
        width: 30px;
        height: 4px;
        margin-bottom: 6px;
        background-color: rgb(51, 51, 51);
        transform: rotate3d(0, 0, 0, 0);
    }
    <!--三条横线 END-->
    
    .burger.transform p {
        background-color: transparent;
    }

    .burger.transform p:first-of-type {
        top: 10px;
        transform: rotate3d(0, 0, 1, 45deg)
    }

    .burger.transform p:last-of-type {
        bottom: 10px;
        transform: rotate3d(0, 0, 1, -45deg)
    }

    <!--点击后第一个和第三个横线的效果 START-->
    .burger.transform p:first-of-type, .burger.transform p:last-of-type {
        transition: transform .4s .3s ease, background-color 250ms ease-in;
        background: #00c1de;
    }
    <!--点击后第一个和第三个横线的效果 END-->
    
    <!--取消点击后恢复动画 START-->
    .burger p:first-of-type, .burger p:last-of-type {
        transition: transform .3s ease .0s, background-color 0ms ease-out;
        position: relative;
    }
    <!--取消点击后恢复动画 END-->

Copy after login

The animation effect can also be achieved by using transition only. For changes in different attributes, mastering the change time and delay time can make the animation sequence

The above is the detailed content of CSS code example for menu button animation. For more information, please follow other related articles on the PHP Chinese website!