说的可能比较绕口上效果
效果：
效果的实现主要就是用到了 两个效果 一个是过度 一个是2d转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.menu_father{
position: absolute;
right: 20px;
top: 20px;
width: 100px;
height: 100px;
}
.menu {
position: absolute;
right: 0px;
top: 0px;
width: 50px;
height: 50px;
background:#007AFF;
border-radius: 50%;
}
.menu div {
position: absolute;
right: 25px;
top: 60px;
margin-right: -15px;
width: 30px;
height: 30px;
border-radius: 50%;
transition: transform 0.4s linear,background-color 0.4s linear;
transform-origin:50% -35px ;
}
.menu_father:hover >div> div:nth-of-type(1) {
transform: rotate(0deg);
background: #FDBA09;
}
.menu_father:hover >div> div:nth-of-type(2) {
transform: rotate(45deg);
background: #FDBA09;
}
.menu_father:hover >div> div:nth-of-type(3) {
transform: rotate(90deg);
background: #FDBA09;
}
</style>
</head>
<body>
<div class="menu_father">
<div class="menu">
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>