如何在鼠標懸停上創建自動模糊效果

Question

我正在瀏覽canva.com的主頁 我對懸停模糊效果在主屏幕上的UI效果感到驚訝。我們如何在我們的網站上開發這樣的功能。它使用CSS3或其他JavaScript插件庫。

感謝

Answer 1

他們使用模糊的背景圖像，畫布和圖像的不模糊的版本。移動鼠標將「清晰」圖像（一部分）「繪製」到另一個透明的畫布上。這使得它看起來像某種魔術，實際上它只是有選擇地將src圖像複製到畫布上。我想象中使用了另一個屏幕外的畫布，以允許「繪製」線條的不透明度消失。然後使用此畫布將複製的圖像與模糊圖像混合。看看「帆布混合模式」