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

Question

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

由于

Answer 1

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