CSS3 弧形菜單是一種獨特而且常用的網頁設計元素，它以其美觀的曲線形狀吸引了眾多用戶的眼球。下面就讓我們通過代碼示例來了解如何創建一個簡單的弧形菜單。
<body>
<nav class="menu">
<ul class="menu-list">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">About Us</a></li>
<li class="menu-item"><a href="#">Services</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</nav>
</body>
<style>
.menu {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.menu-list {
display: flex;
justify-content: center;
align-items: center;
list-style-type: none;
}
.menu-item {
margin: 20px;
transition: .3s;
}
.menu-item:hover {
transform: scale(1.2);
transition: .3s;
}
.menu-list li:nth-child(1) { transform: rotate(0deg) translate(200px, 0); }
.menu-list li:nth-child(2) { transform: rotate(40deg) translate(200px, 0); }
.menu-list li:nth-child(3) { transform: rotate(80deg) translate(200px, 0); }
.menu-list li:nth-child(4) { transform: rotate(120deg) translate(200px, 0); }
.menu-item a {
padding: 10px;
border-radius: 20px;
background-color: #4a4a4a;
color: #fff;
text-decoration: none;
}
</style>在上面的代碼中，我們首先創建了一個包含菜單的導航欄。我們使用了 Flexbox 模型來使導航欄居中對齊，并使用了無序列表<ul>來裝載菜單列表內容。接下來，我們使用了:nth-child(n)CSS 偽類來給每個菜單項設置位置，配合transform屬性控制它們的旋轉角度和水平偏移量。最后，我們設置了一些樣式屬性讓菜單看起來更美觀。
現在，我們就已經成功地創建了一個簡單而實用的 CSS3 弧形菜單了。您可以通過調整旋轉角度、水平偏移、字體大小等屬性來改變菜單的曲線形狀和大小。通過它，您的網頁設計將會更加完美而引人注目。
上一篇css3底色
下一篇css 圖標代碼怎么寫