javascript - 这种交互动画如何写？-PHP中国語ネットワークQ&A

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

自答一发：

.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 但是：两者的位置，圈圈的大小需要不断调节各项参数使之协调，感觉不太好。
想了解各位前辈在实际工作中会怎样写这种交互动画？

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写一下就好。