[分享]css3扇形导航

扇形导航是一种很常见的网页导航效果，它通过CSS3中的transform属性来实现。今天就让我们来看看如何使用CSS3实现一个简单的扇形导航。HTML部分： CSS部分： .fanmen...

扇形导航是一种很常见的网页导航效果，它通过CSS3中的transform属性来实现。今天就让我们来看看如何使用CSS3实现一个简单的扇形导航。

HTML部分：
<ul class="fan-menu">
  <li><a href="#"><i class="fa fa-home"></i></a></li>
  <li><a href="#"><i class="fa fa-search"></i></a></li>
  <li><a href="#"><i class="fa fa-envelope"></i></a></li>
  <li><a href="#"><i class="fa fa-bell"></i></a></li>
  <li><a href="#"><i class="fa fa-user"></i></a></li>
</ul>

CSS部分：
.fan-menu {
  list-style: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  padding: 0;
  margin: 0;
  z-index: 1;
}
.fan-menu li {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom right;
  transition: all 0.3s ease;
}
.fan-menu li:nth-child(1) {
  transform: rotate(-72deg) skew(30deg) translateX(100px) rotate(72deg) skew(-30deg);
}
.fan-menu li:nth-child(2) {
  transform: rotate(-144deg) skew(30deg) translateX(100px) rotate(144deg) skew(-30deg);
}
.fan-menu li:nth-child(3) {
  transform: rotate(-216deg) skew(30deg) translateX(100px) rotate(216deg) skew(-30deg);
}
.fan-menu li:nth-child(4) {
  transform: rotate(-288deg) skew(30deg) translateX(100px) rotate(288deg) skew(-30deg);
}
.fan-menu li:nth-child(5) {
  transform: rotate(0deg) skew(30deg) translateX(100px) rotate(0deg) skew(-30deg);
}
.fan-menu li:hover {
  transform: scale(1.2);
}
.fan-menu li a {
  display: block;
  width: 40px;
  height: 40px;
  background-color: #333;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
}
.fan-menu li a i {
  font-size: 20px;
}

在这段代码中，我们通过设置ul和li元素的位置、旋转角度和skew变形来实现扇形的效果。在:hover状态下，我们通过设置transform:scale(1.2)来实现鼠标悬浮时的放大效果。通过给a标签设置样式，我们可以定义出每个扇形的图标和背景颜色。

使用CSS3实现扇形导航不仅仅是一种功能性的要求，同时也是一种视觉上的提升。希望本文可以帮助大家更好地了解和掌握CSS3扇形导航的实现方法。