[分享]css3扇形文字导航

CSS3是一个强大的标记语言，可以实现很多炫酷的效果。其中一个常见的应用就是扇形文字导航。下面我们就来介绍一下如何实现这个效果。HTML代码： 首页 产品介绍 解决方案 服务支持 关于我们 C...

CSS3是一个强大的标记语言，可以实现很多炫酷的效果。其中一个常见的应用就是扇形文字导航。下面我们就来介绍一下如何实现这个效果。

HTML代码：
<div class="circle">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品介绍</a></li>
    <li><a href="#">解决方案</a></li>
    <li><a href="#">服务支持</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</div>

CSS代码：
.circle {
  width: 600px;
  height: 600px;
  margin: 0 auto;
  position: relative;
}
.circle ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 400px;
  height: 400px;
}
.circle ul li {
  float: left;
  width: 50%;
  height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: top left;
  text-align: center;
}
.circle ul li:nth-child(1) {
  transform: rotate(0deg);
}
.circle ul li:nth-child(2) {
  transform: rotate(72deg);
}
.circle ul li:nth-child(3) {
  transform: rotate(144deg);
}
.circle ul li:nth-child(4) {
  transform: rotate(216deg);
}
.circle ul li:nth-child(5) {
  transform: rotate(288deg);
}
.circle ul li a {
  display: block;
  font-size: 22px;
  font-weight: bold;
  color: #333;
  text-transform: uppercase;
  text-decoration: none;
  padding-top: 70px;
}

圆形容器的宽高设置为600px，并让其居中显示。ul元素相对于容器进行绝对定位，并将左右上下都设置为0来实现居中显示，同时给ul宽高设置为400px，使得其成为一个正方形。接下来，每个li元素使用相对于父元素的绝对定位来实现放置在正方形的顶点位置。使用transform-origin属性将旋转中心设置为顶点位置，并分别对li元素使用不同的旋转角度，从而实现扇形的效果。最后，对每个a元素进行样式设置，使其居中并使字体变大加粗，颜色为黑色，实现扇形文字导航的效果。

以上就是实现CSS3扇形文字导航的方法，希望对大家有所帮助。