[分享]css3扇形导航效果

CSS3是一个强大的前端技术，能够帮助我们实现各种酷炫的效果，其中包括扇形导航效果。下面我们就来看看如何使用CSS3实现这个效果。 主页 新闻 论坛 博客 下载 联系我们 首先，我们需要创建一个无...

CSS3是一个强大的前端技术，能够帮助我们实现各种酷炫的效果，其中包括扇形导航效果。下面我们就来看看如何使用CSS3实现这个效果。

 <ul>
        <li><a href="#">主页</a></li>
        <li class="fan1"><a href="#">新闻</a></li>
        <li class="fan2"><a href="#">论坛</a></li>
        <li class="fan3"><a href="#">博客</a></li>
        <li class="fan4"><a href="#">下载</a></li>
        <li class="fan5"><a href="#">联系我们</a></li>
    </ul> 

首先，我们需要创建一个无序列表，其中每个列表项都是一个链接。然后，为了实现扇形导航效果，我们需要给每个列表项添加class属性，并使用CSS3的transform属性将它们旋转到正确的位置。

 ul {
        position: relative;
        transform: rotate(90deg);
        margin: 0;
        padding: 0;
        list-style: none;
        width: 200px;
        height: 200px;
    }
    
    ul li {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        margin-left: -100px;
        margin-top: -100px;
        border-radius: 50%;
        background-color: #333;
        text-align: center;
        line-height: 200px;
        transition: all 0.5s ease-in-out;
        transform-origin: 0 0;
    }
    
    ul li:hover {
        transform: rotate(-360deg);
    }
    
    .fan1 {
        transform: rotate(60deg);
    }
    
    .fan2 {
        transform: rotate(120deg);
    }
    
    .fan3 {
        transform: rotate(180deg);
    }
    
    .fan4 {
        transform: rotate(240deg);
    }
    
    .fan5 {
        transform: rotate(300deg);
    } 

上面的CSS代码中，我们将ul设置为相对定位，并使用transform属性让它旋转90度。我们还将ul和li的宽度和高度都设置为200px，并且将li的边框半径设置为50%，让它们看起来像是一个圆形。接着，我们使用transform-origin属性将它们的旋转点设置为左上角，这样扇形导航效果才能生效。

然后，我们为每个列表项添加一个:hover伪类，让它们在鼠标悬停时旋转。我们还为每个列表项添加对应的class，使用transform属性让它们旋转到正确的位置。

最后，我们得到了一个漂亮的扇形导航效果，用户在鼠标悬停时可以看到旋转的动画。