變化球（Hamburger Icon）是網頁設計中常用的圖標之一，它通常用于展開或收起菜單欄。在 CSS 中實現變化球圖標是一項很有趣的任務，下面我們來看一下如何使用 CSS 實現變化球效果。

// HTML 代碼<div class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>

首先，我們需要添加 HTML 代碼，其中 div 元素擁有一個名為 hamburger 的類，并且包含了三個 span 元素，它們都有一個名為 line 的類。接下來就可以通過 CSS 來實現變化球效果了。

// CSS 代碼.hamburger {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 20px;
width: 25px;
cursor: pointer;
}
.hamburger .line {
height: 3px;
width: 100%;
background-color: #333;
transition: all 0.3s ease-in-out;
}
.hamburger.open .line:nth-of-type(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open .line:nth-of-type(2) {
opacity: 0;
}
.hamburger.open .line:nth-of-type(3) {
transform: rotate(-45deg) translate(5px, -5px);
}

首先，我們為 .hamburger 元素添加屬性來定義其包含的三個線段。我們還為元素添加了設置好的大小，并且 cursor 屬性定義了鼠標 pointer 的外觀，這樣用戶就會知道這個元素可以被點擊。之后，我們定義了 .hamburger .line 類來定義每一條線段的樣式。接下來是添加變化球效果的關鍵部分：

• 對于第一條線段，我們使用 CSS transform 屬性將其旋轉 45 度，并移動到右下方。
• 對于第二條線段，我們只需要將其透明度設為 0 即可讓其消失。
• 對于第三條線段，我們使用 CSS transform 屬性將其旋轉 -45 度，并移動到右上方。

最后，我們只需使用 JavaScript 將 .hamburger 元素的 open 類與點擊事件關聯即可。

// JavaScript 代碼document.querySelector('.hamburger').addEventListener('click', function() {
this.classList.toggle('open');
});

這樣，變化球效果就完成了。使用 CSS 實現變化球效果的好處在于可以讓我們輕松地自定義動畫并使其適應不同的設備尺寸，同時還可以通過使用 transform 屬性來提高動畫性能。祝你好運！