在網頁設計中，動畫效果是很重要的一個組成部分。下拉旋轉動畫是一種常見的動畫效果，可以讓用戶更直觀地了解頁面的結構和內容。下面我們來學習一下如何使用CSS實現下拉旋轉動畫。

/* HTML結構 */
<div class="dropdown">
<button class="dropbtn">下拉菜單</button>
<ul class="dropdown-content">
<li><a href="#home">主頁</a></li>
<li><a href="#about">關于我們</a></li>
<li><a href="#contact">聯系我們</a></li>
</ul>
</div>
/* CSS樣式 */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-content a {
display: block;
color: black;
padding: 12px 16px;
text-decoration: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover {
background-color: #3e8e41;
}
/* 下拉旋轉動畫 */
.dropdown:hover .dropbtn {
transform: rotate(180deg);
transition: transform 0.5s ease-in-out;
}

我們首先使用HTML創建了一個下拉菜單的結構：一個按鈕和一個無序列表。當鼠標懸停在按鈕上時，使用CSS讓下拉菜單的列表顯示出來。最后通過CSS代碼中的transform屬性和transition屬性，讓按鈕在下拉菜單展開的同時實現旋轉動畫的效果。

注意：使用動畫效果要注意合適的時機和適當的程度，動畫過于夸張或過于頻繁可能會影響用戶體驗。