效果圖如下

hanbao.gif

首先是HTML部分的代碼，很簡單。

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

接下來就是重點了，CSS代碼部分走起。

<style>
        .hamburger { /*這個不重要，可有可無 主要是針對導(dǎo)航欄布局時，漢堡按鈕的位置*/
            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) {  /*第一條線位移到中心位置，順時針旋轉(zhuǎn)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) { /*第三條線位移到中心位置，逆時針旋轉(zhuǎn)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>