CSS实现菜单按钮动画的案例-创新互联

小编给大家分享一下CSS实现菜单按钮动画的案例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

要写一个下拉菜单点击按钮 菜单入口就是是点击一个图标按钮 之前都是随便用个图片代替 今天突然想用CSS写个效果 主要参考澎湃移动端右上角的按钮

效果：

HTML

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

        

        

        

    

CSS

    .burger {
        cursor: pointer;
        display: inline-block;
        margin: 7px 6px 0 0;
        outline: none;
    }
    
    
    
    .burger p {
        width: 30px;
        height: 4px;
        margin-bottom: 6px;
        background-color: rgb(51, 51, 51);
        transform: rotate3d(0, 0, 0, 0);
    }
    
    
    .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)
    }

    
    .burger.transform p:first-of-type, .burger.transform p:last-of-type {
        transition: transform .4s .3s ease, background-color 250ms ease-in;
        background: #00c1de;
    }
    
    
    
    .burger p:first-of-type, .burger p:last-of-type {
        transition: transform .3s ease .0s, background-color 0ms ease-out;
        position: relative;
    }
    

只用transition也是能达到 animation的效果的 通过设置不同属性的变化 掌握好变化时间 和延时的时间 就可以让动画有先后顺序

以上是CSS实现菜单按钮动画的案例的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站制作公司行业资讯频道！