CSS橢圓軌道旋轉菜單是一種非常酷的交互設計，它讓我們的網站看起來更加精美、時尚。今天，我們將學習如何使用CSS創建一個漂亮的橢圓軌道旋轉菜單。

.nav {
width: 200px; /*菜單寬度*/
height: 200px; /*菜單高度*/
border-radius: 50%; /*邊框半徑為50%*/
position: relative; /*相對定位*/
margin: 100px auto; /*居中*/
transform: translate(-50%, -50%); /*菜單居中*/
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /*添加陰影*/
}
.item {
position: absolute; /*絕對定位，相對于.nav*/
top: 50%; /*垂直居中*/
left: 50%; /*水平居中*/
transform: translate(-50%, -50%) rotate(0deg); /*初始狀態為水平方向*/
width: 50px;
height: 50px;
background-color: #333;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 50px;
border-radius: 50%; /*邊框半徑為50%*/
cursor: pointer; /*鼠標指針為手形*/
transition: transform 0.5s ease; /*添加過渡動畫*/
}
.item:hover {
transform: translate(-50%, -100%) rotate(360deg); /*鼠標懸浮時逆時針旋轉一周*/
}

通過以上代碼，我們可以實現如下效果：


通過橢圓軌道、絕對定位和過渡動畫，我們可以輕松創建一個漂亮的橢圓軌道旋轉菜單。當然，如果你想要更加細致的調整，也可以修改部分CSS屬性進行自定義設置。