css部分：

*{
margin: 0;
padding: 0;
list-style: none;
}
.container{
width: 100vw;
height: 100vh;
background: #222222;
display: flex;
justify-content: center;
align-items: center;
}
.nav{
width: 15vh;
height: 15vh;
line-height: 15vh;
background: #FFFFFF;
border-radius: 100%;
font-size: 30px;
color: #548B54;
text-align: center;
position: relative;
}
.nav .ul{
border: 11.5vh solid transparent;
position: absolute;
top: -4vh;
left: -4vh;
transform: scale(0);
transition: transform 1.3s .4s;
}
.nav .ul li{
width: 5vh;
height: 5vh;
line-height: 5vh;
background: #FFFFFF;
border-radius: 100%;
font-size: 20px;
position: absolute;
top: -11.2vh;
left: -11.2vh;
transform-origin: 100px 100px;
transition: all .4s .4s;
}
.nav:hover{
background: rgba(255,255,255,.75);
}
.nav:hover .ul{
transform: scale(1);
transition: transform .4s .1s ;
}
.nav:hover .ul li{
transition-delay:0.02s;
}
.nav:hover .ul li:nth-of-type(1){
transform: rotate(0deg);
}
.nav:hover .ul li:nth-of-type(2){
transform: rotate(40deg);
}
.nav:hover .ul li:nth-of-type(3){
transform: rotate(80deg);
}
.nav:hover .ul li:nth-of-type(4){
transform: rotate(120deg);
}
.nav:hover .ul li:nth-of-type(5){
transform: rotate(160deg);
}

.nav:hover .ul li:nth-of-type(6){
transform: rotate(200deg);
}
.nav:hover .ul li:nth-of-type(7){
transform: rotate(240deg);
}
.nav:hover .ul li:nth-of-type(8){
transform: rotate(280deg);
}
.nav:hover .ul li:nth-of-type(9){
transform: rotate(320deg);

}

html部分：

菜单
1 2 3 4 5 6 7 8 9

原文地址：https://blog.csdn.net/impossible1994727/article/details/79694839?ops_request_misc=&request_id=86e809fea7e5438eb011285d686a4b82&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-12-79694839-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88