有一个带边框的按钮：
将鼠标悬停在按钮上时，边框应滚动 360 度，而按钮本身应保持静止。这是代码：
.menu__button_animat {
background-image: conic-gradient( #755efc 90deg, #fff 90deg 175deg, #755efc 150deg );
}
.menu__button-close {
height: 60px;
width: 60px;
border: none;
background: #F8F6FF url(https://i.ibb.co/JnNj5GZ/Icon-2.png) center no-repeat;
z-index: 100;
border-radius: 50%;
position: absolute;
top: 4px;
left: 4px;
}
.mega-menu__circle-border {
display: inline-block;
width: 68px;
height: 68px;
position: relative;
border-radius: 50%;
}
.mega-menu__circle-border:after {
border-radius: 50%;
display: block;
content: "";
background: #fff;
position: absolute;
left: 2px;
top: 2px;
height: 64px;
width: 64px;
}
.menu__button_animat:hover {
animation: progress 1s linear forwards;
}
@keyframes progress {
100% {transform:rotate(360deg);}
}<div class="mega-menu__circle-border menu__button_animat ">
<button class="menu__button-close "></button>
</div>图标本身是通过 注册的::before，无论如何，按钮的旋转仍然存在。请告诉我，我错过了什么？