[分享]css3半圆菜单导航效果

CSS3半圆菜单导航效果是一种经典的网页导航样式，可以让网页更加美观和优雅。下面是一份简单的CSS样式代码，可以帮助你实现这种效果。nav { : relative; width: 100; heig...

CSS3半圆菜单导航效果是一种经典的网页导航样式，可以让网页更加美观和优雅。下面是一份简单的CSS样式代码，可以帮助你实现这种效果。

nav {
  position: relative;
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;
}

nav ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

nav ul li {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  border-radius: 50%;
  margin: 0 10px;
  cursor: pointer;
}

nav ul li:before {
  content: ';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  background-color: #fff;
  border-radius: 50%;
  z-index: -1;
  transition-duration: .3s;
  transition-timing-function: ease-out;
  transform: scale(0);
}

nav ul li:hover:before {
  transform: scale(1);
}

nav ul li:first-child:before {
  background-color: #ff6347;
}

nav ul li:nth-child(2):before {
  background-color: #4caf50;
}

nav ul li:nth-child(3):before {
  background-color: #2196f3;
}

nav ul li:nth-child(4):before {
  background-color: #ffc107;
}

nav ul li:nth-child(5):before {
  background-color: #9c27b0;
} 

上面这段代码中的nav代表导航条的父级元素，通过position属性来设置相对定位，并定义导航条的高度和背景色。ul代表导航列表，同样设置了相对定位，并通过transform和left属性来设置居中。li代表每个列表项，使用了inline-block布局和圆形边框的样式，还添加了:before伪元素作为高亮hover时的样式。

通过上述代码，你可以轻松地实现CSS3半圆菜单导航效果，并将它应用在你的网站中。欢迎大家尝试！