如何在鼠标悬停上创建自动模糊效果

Question

我正在浏览canva.com的主页 我对悬停模糊效果在主屏幕上的UI效果感到惊讶。我们如何在我们的网站上开发这样的功能。它使用CSS3或其他JavaScript插件库。

感谢

Answer 1

他们使用模糊的背景图像，画布和图像的不模糊的版本。移动鼠标将“清晰”图像（一部分）“绘制”到另一个透明的画布上。这使得它看起来像某种魔术，实际上它只是有选择地将src图像复制到画布上。我想象中使用了另一个屏幕外的画布，以允许“绘制”线条的不透明度消失。然后使用此画布将复制的图像与模糊图像混合。看看“帆布混合模式”