JavaScript / HTML图像过渡效果

Question

我正试图模仿以下所示的“心脏”转变：

http://www.templatemonster.com/flash-templates/31595.html?scr_type=1&hide_flash=0&tab=32

HTML5 / JS中的

，但我真的不知道从哪里开始。有小费吗？基于JQuery的东西对我很好。

Answer 1

Canvas剪辑蒙版是一个很好的起点 https://developer.mozilla.org/samples/canvas-tutorial/6_2_canvas_clipping.html

Answer 2

http://www.fabulant.com/downloadcenter/imgtransheart/imgtransheart.html

脚本易于遵循和修改。您可以使用自己的心脏图像（覆盖图像在js中加载）。唯一的技巧是确保为每张图像平滑地缩放透明光圈。