[分享]css3扇形动画菜单

CSS3扇形动画菜单，顾名思义，是一种基于CSS3技术制作的动画菜单效果。它采用了圆形、扇形等造型线条，通过CSS3的transform、animation等属性，制作出一系列酷炫的动画效果。/CSS...

CSS3扇形动画菜单，顾名思义，是一种基于CSS3技术制作的动画菜单效果。它采用了圆形、扇形等造型线条，通过CSS3的transform、animation等属性，制作出一系列酷炫的动画效果。

/*CSS3扇形动画菜单*/
.menu{
    position:relative;
    width:300px;
    height:300px;
}
.menu li{
    position:absolute;
    list-style:none;
    width:60px;
    height:60px;
    line-height:60px;
    text-align:center;
    border-radius:50%;
    background-color:#fff;
    font-size:16px;
    cursor:pointer;
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
}
.menu li:nth-child(1){/*第一个扇形*/
    left:50%;
    top:-30px;
    margin-left:-30px;
    transform:rotate(0deg);
    animation:menu-rotate 1s linear infinite;
}
.menu li:nth-child(2){/*第二个扇形*/
    left:142.5px;
    top:142.5px;
    transform:rotate(45deg);
}
.menu li:nth-child(3){/*第三个扇形*/
    left:50%;
    bottom:-30px;
    margin-left:-30px;
    transform:rotate(90deg);
}
.menu li:nth-child(4){/*第四个扇形*/
    right:142.5px;
    top:142.5px;
    transform:rotate(135deg);
}
.menu li:nth-child(5){/*第五个扇形*/
    left:-30px;
    top:50%;
    margin-top:-30px;
    transform:rotate(180deg);
}
.menu li:nth-child(6){/*第六个扇形*/
    left:142.5px;
    bottom:142.5px;
    transform:rotate(225deg);
}
.menu li:nth-child(7){/*第七个扇形*/
    left:50%;
    top:330px;
    margin-left:-30px;
    transform:rotate(270deg);
}
.menu li:nth-child(8){/*第八个扇形*/
    right:142.5px;
    bottom:142.5px;
    transform:rotate(315deg);
}
@keyframes menu-rotate{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
} 

使用上述代码，在HTML页面中添加一个class为menu的ul元素，再在其中添加八个li元素，就可以制作出一个酷炫的扇形动画菜单啦~