Question

我试着回复一下： sketch

PS ：如果可能的话，我想在悬停时设置边框动画

我不知道怎么做到这一点，我试过这个：

clip-path: polygon(0 0, 100% 0, 92% 86%, 6% 100%);

但正如您所看到的，形状超出了div框限制。

这是我的尝试：https://petitmaraichage.fr/

我想到了SVG，但菜单内容是动态的，因此文本可以更改......

如果有人有想法:)

谢谢

Answer 1

我知道我会说的会有害，但我怀疑你用过的方法会让你成功。我认为你需要在胜利方面采取以下步骤：

使用画布
使用图片中的点和线来确定您需要的多边形和线条。
根据您在第2点描述的计划，在画布上绘制内容，但不要忘记也有悬停状态
为您的画布创建一个mousemove并单击Javascript事件

`

canvas.addEventListener('mousemove', function(e) {
    //Here comes your logic, the coordinates are e.clientX and e.clientY
});

canvas.addEventListener('click', function(e) {
    //Here comes your logic, the coordinates are e.clientX and e.clientY
});

`

带有动画的马赛克几何菜单

1 个答案: