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>