javascript - 这种交互动画如何写？

Question

如图 一个菜单按钮 我想写一个交互动画
1.鼠标悬停 外层画出圆圈
2.鼠标移出 圆圈缩短至消失。
本人菜鸟 望各位大神不吝赐教 谢谢

自答一发：

<p class="menubut">
    <span class="iconfont font-menu"></span>
    <svg class="round">
        <circle cx="25" cy="25" r="23" stroke="#fff" stroke-width="3" fill="none"/>
    </svg>
</p>

.menubut{
    position: relative;
}
.menubut .font-menu{
    position: absolute;top: 10px;left: 10px;z-index: 2;display: block;width: 45px;line-height: 45px;text-align: center;font-size: 32px;
}
.menubut .font-menu:before{
    content: '\e605';color: #fff;cursor: pointer;
}
.menubut .round{
    position: absolute;top: 8px;left: 8px;z-index: 1;width: 50px;height: 50px;transform: rotate(-90deg);cursor: none;
}
.menubut .round circle{
    stroke-dasharray: 150;stroke-dashoffset: 150;stroke-linecap: round;transition: stroke-dashoffset .8s ease-out;
}
.menubut .font-menu:hover+.round circle{
    stroke-dashoffset: 0;
}

菜单按钮用字体图标 圈圈用svg 但是：两者的位置，圈圈的大小需要不断调节各项参数使之协调，感觉不太好。
想了解各位前辈在实际工作中会怎样写这种交互动画？

Answer 1

你可以参考下这个，移开缩短就写相反的就好了

https://codepen.io/katmai7/pe...

Answer 2

html

<p class="circle"> 
<p class="pie_left">
<p class="left"></p>
</p> 
<p class="pie_right">
<p class="right"></p>
</p> 
<p class="mask"><span>＝</span></p>
</p>

css

.circle { width: 200px; height: 200px; position: absolute; border-radius: 50%; background: #0cc; } 
.pie_left, .pie_right { width: 200px; height: 200px; position: absolute; top: 0;left: 0; } 
.left, .right { display: block; width:200px; height:200px;border-radius: 50%; position: absolute; top: 0; left: 0; transform: rotate(30deg); }           
.pie_right, .right { clip:rect(0,auto,auto,100px); }
.pie_left, .left { clip:rect(0,100px,auto,0); } 
.mask { width: 150px; height: 150px; border-radius: 50%; left: 25px; top: 25px; background: #FFF; position: absolute; text-align: center; line-height: 150px; font-size: 16px; }

---

动画用js写一下就好。