自定义汉堡按钮

效果图如下

hanbao.gif

首先是HTML部分的代码，很简单。

<div class="hamburger">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
    </div>

接下来就是重点了，CSS代码部分走起。

<style>
        .hamburger { /*这个不重要，可有可无 主要是针对导航栏布局时，汉堡按钮的位置*/
            padding-top: 6px;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }
        .hamburger .line { /*定义三条红线，加上过渡，准备动*/
            width: 30px;
            height: 2px;
            background-color: #fe1111;
            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 { /*通过js添加类名，给汉堡按钮加上缩放动画*/
            animation: smallbig 0.6s forwards;
        }
        .is-active .line:nth-child(1),
        .is-active .line:nth-child(2),
        .is-active .line:nth-child(3) { /*三条线加点延时，没什么卵用*/
            -webkit-transition-delay: 0.2s;
            -o-transition-delay: 0.2s;
            transition-delay: 0.2s;
        }
    
        .is-active .line:nth-child(2) { /*延时0.2s之后，进行过渡动画，第二句话是做兼容处理*/
            opacity: 0;
            filter: alpha(opacity=0);
        }
        .is-active .line:nth-child(1) {  /*第一条线位移到中心位置，顺时针旋转45°*/
            -webkit-transform: translateY(8px) rotate(45deg);
            -ms-transform: translateY(8px) rotate(45deg);
            -o-transform: translateY(8px) rotate(45deg);
            transform: translateY(8px) rotate(45deg);
        }
        .is-active .line:nth-child(3) { /*第三条线位移到中心位置，逆时针旋转45°*/
            -webkit-transform: translateY(-12px) rotate(-45deg);
            -ms-transform: translateY(-12px) rotate(-45deg);
            -o-transform: translateY(-12px) rotate(-45deg);
            transform: translateY(-12px) rotate(-45deg);
        }
        @keyframes smallbig { /*定义缩放的动画，50%的时候缩放为0*/
            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);
            }
        }
    </style>

最后，来一个简单的js，搞定。

<script>
        $(document).ready(function () {
            $(".hamburger").click(function () {
                $(this).toggleClass("is-active");
            });
        });
    </script>