果你曾經在瀏覽網頁時看到三條線堆疊在一起，那么你就遇到了漢堡菜單。它是移動和響應式網頁設計中使用的一種流行設計元素，用于創建干凈、簡約的界面。

單擊時，這個小菜單會從屏幕的任一側滑出，顯示導航項或選項列表。當菜單打開時，漢堡菜單也會變成“X”或其他形狀。

在這篇文章中，我們將向您展示如何在 CSS 中創建不同的漢堡菜單動畫。讓我們開始吧！

創建漢堡菜單

要創建漢堡菜單，我們首先需要創建 HTML 。由一個按鈕元素和三個嵌套的 div 元素組成，每個元素代表漢堡圖標的一行。

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

接下來，我們將為元素添加一些基本樣式。我們將從按鈕元素中刪除任何默認樣式，包括背景和邊框顏色。

.hamburger {
    background: transparent;
    border: transparent;
    cursor: pointer;
    padding: 0;
}

然后，對于每個線元素，我們將設置背景顏色、高度、寬度和每個直線之間的間距。

.hamburger__line {
    background: rgb(203 213 225);
    margin: 0.25rem 0;
    height: 0.25rem;
    width: 2rem;
}

X

是時候使用 CSS 創建一個很酷的漢堡菜單動畫了。當用戶將鼠標懸停在按鈕上時，我們希望線條轉換為“X”形。

為了實現這一點，我們將使用 :hover 偽類和 nth-child 選擇器來訪問每一行。我們將使用 translate() 和 rotate() 函數將線條轉換為 X 形狀。

第一條線將在 y 軸上向下移動并旋轉 45 度以創建一條 X 形狀的線。第二行將通過將其不透明度設置為零而消失。最后一條線將在 y 軸上向上移動，并逆時針方向旋轉 45 度以完成 X 形狀。我們將通過在 translate() 和 rotate() 函數中使用負值，將其轉換為與第一行相反的方向。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger:hover .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

若要應用轉換，我們將使用該 transition 屬性。動畫將使用 ease-out 計時功能運行 300 毫秒 （0.3s）。該 all 值表示將對樣式更改進行動畫處理，包括 transform 和 opacity 屬性。

.hamburger__line {
    transition: all 0.3s ease-out;
}

通過將鼠標懸停在按鈕上來嘗試一下。

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

形成減號

在這種方法中，當按鈕懸停在按鈕上時，我們會將其變成減號。我們將使用與上一種方法相同的轉換，但我們不會旋轉第一行和最后一行。

相反，我們將在 y 軸上向下移動第一行，直到它到達第二行。第三條線將向上移動，直到到達第一行。然后，第二行將關閉可見性，就像在前面的方法中一樣。

第一行和最后一行的 `transform` 屬性將與前面的方法相同，只是我們將不再使用該 `rotate()` 函數。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translateY(9px);
}

.hamburger:hover .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translateY(-9px);
}

看看它是什么樣子的！

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

要將按鈕變成減號，我們可以使用另一種效果，將第一行和最后一行水平移出按鈕。我們將使用該 translateX() 函數來指示位置僅在 x 軸上發生了變化。使用 translateX(-100%) ，可以將目標從左向右移出容器，而使用translateX(100%) ，我們可以做相反的事情。

這兩種轉換都將 opacity 屬性設置為零，使第一行和最后一行不可見。因此，動畫完成后，只有第二行仍然可見。

.hamburger:hover .hamburger__line:nth-child(1) {
    opacity: 0;
    transform: translateX(-100%);
}

.hamburger:hover .hamburger__line:nth-child(3) {
    opacity: 0;
    transform: translateX(100%);
}

看看這如何重現減號。

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

形成加號

在本節中，我們將向您展示另一種類型的轉換。當用戶將鼠標懸停在按鈕上時，它會變成一個加號。為了達到這種效果，我們將第一條線向下移動，直到它與第二條線相遇，從而形成一條水平線。

然后，我們移動 y 軸上的最后一條線并將其逆時針旋轉 90 度，形成加號的垂直線。最后，我們調整 opacity 第二行，使其在動畫后不可見。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translateY(9px);
}

.hamburger:hover .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translateY(-9px) rotate(-90deg);
}

查看下面的演示，了解這種方法的實際應用。

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

形成箭頭

為了在按鈕上創建箭頭，我們使用簡單的轉換技術。第一條線旋轉 45 度并沿 x 軸和 y 軸移動，直到它與第二條線的第一個點相交，形成箭頭的頂線。然后，我們減小第一行的寬度，使其看起來更時尚。將相同的轉換應用于最后一行，以創建箭頭的底線。

如果需要調整箭頭的位置，請隨意調整傳遞給 translate() 函數的值。

.hamburger:hover .hamburger__line:nth-child(1) {
    transform: translate(-2px, 4px) rotate(-45deg);
    width: 16px;
}

.hamburger:hover .hamburger__line:nth-child(3) {
    transform: translate(-2px, -4px) rotate(45deg);
    width: 16px;
}

當您將鼠標懸停在按鈕上時，箭頭的樣子如下：

<button class="hamburger">
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
    <div class="hamburger__line"></div>
</button>

要更改箭頭的方向，請調整 translate() 函數的參數。這將確保第一行和最后一行到達第二行的末尾，并且箭頭將沿相反方向旋轉。

1），截圖

（2），文件夾, 線條, 頁面等圖標暫不能提供, 暫截圖

（3），代碼