如图 一个菜单按钮 我想写一个交互动画
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 但是:两者的位置,圈圈的大小需要不断调节各项参数使之协调,感觉不太好。
想了解各位前辈在实际工作中会怎样写这种交互动画?
你可以参考下这个,移开缩短就写相反的就好了
https://codepen.io/katmai7/pe...
html
css
动画用js写一下就好。