0
我想讓虛線的圓圈旋轉360度1個計數，同時懸停在3個內襯的菜單圖標上。如果可能的話，我只想用css和html來做到這一點。這是我得到的，我似乎無法弄清楚。 新來的StackOverflow，只是增加片斷需要幫助搞清楚css懸停動畫
body {
background-color: black;
padding: 10px;
}
#container {
position: relative;
margin: 0px;
padding: 0px;
width: 220px;
height: 220px;
//border: 1px solid white;
}
#dashed {
width: 200px;
height: 200px;
border: 10px dashed white;
border-radius: 50%;
}
#menuIcon {
position: absolute;
top: 75px;
left: 42.5px;
width: 136px;
}
#top {
margin: 0px 0px 15px 0px;
width: 135px;
height: 15px;
background-color: white;
}
#mid {
margin: 0px 0px 0px 0px;
width: 135px;
height: 15px;
background-color: white;
}
#bottom {
margin: 15px 0px 0px 0px;
width: 135px;
height: 15px;
background-color: white;
}
#menuIcon:hover #dashed {
animation: spin .8s 1;
}
@keyframes spin {
transform: rotate(360deg);
}<div id="container">
<div id="dashed"></div>
<div id="menuIcon">
<div id="top"></div>
<div id="mid"></div>
<div id="bottom"></div>
</div>
</div>