如何在画布上悬停实现此效果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在画布上悬停实现此效果相关的知识,希望对你有一定的参考价值。

当您点击汉堡包菜单时,会出现菜单。当您将鼠标悬停在文本右侧时,左侧的照片会生效。我的问题是:如何实现这种效果。链接到页面:https://delcambio.me/en/gruppo/home

我检查这个元素,我发现这是画布,但我不知道如何实现这种效果。

答案

这不是浏览器开箱即用的标准效果。他们已经做了一些自己的认真工作来实现它。很可能它涉及WebGL,虽然我不知道。我也不知道这个效果是否有名字(可能不是)所以我不能指向你的任何方向。

我的建议是仔细研究他们的网页。这绝对是javascript,所以请检查事件处理程序和Javascript源,直到找到您要查找的内容。对不起,它不会快速而简单。

以上是关于如何在画布上悬停实现此效果的主要内容,如果未能解决你的问题,请参考以下文章

如何从画布中清除图表以便无法触发悬停事件?

jQuery:如何在悬停、div 的 BORDER-RADIUS 和 MARGIN 上添加过渡?

如何在一行上获得 3d 瓷砖并在悬停时获得缩放效果?

如何在导航上添加悬停过渡效果?

如何使悬停在活动按钮上不使用悬停效果?

如何在特定卡片上制作悬停效果并停止在剩余卡片上悬停?