css3弧形菜单 |css flex 横向排列

单独讲css，vue css和scss，css画异型标签，CSS是什么手机像素，css样式表保存软件，css怎么实现div的切换，css flex 横向排列 css3弧形菜单 |css flex 横向排列

<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 弧形菜单了。您可以通过调整旋转角度、水平偏移、字体大小等属性来改变菜单的曲线形状和大小。通过它，您的网页设计将会更加完美而引人注目。