用其他GIF掩盖GIF

Cassie Evans最近分享了一个巧妙的技巧：利用SVG遮罩将一个GIF叠加在另一个GIF之上，效果令人惊艳，尤其是在彩色GIF叠加在单色GIF上的情况下。

由于之前从未使用过SVG遮罩，我尝试解读Cassie的代码，发现其原理出奇地简单。

首先，选择用作SVG遮罩的GIF，例如从GIPHY网站获取。

然后，直接在HTML中编写SVG代码。首先添加<defs></defs>标签，用于存储稍后将在SVG其他部分引用的资源：

<svg viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><defs><mask id="MASK" maskcontentunits="userSpaceOnUse" maskunits="userSpaceOnUse"><image height="100%" width="100%" xlink:href="https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif"></image></mask></defs></svg>

注意<mask></mask>元素中添加的id="MASK"属性，稍后将通过此属性引用遮罩。

接下来，选择另一个GIF作为底层图像（例如，一个太空场景的GIF）。

将此GIF添加到<g></g>元素中，并应用遮罩属性：

<svg viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><defs><mask id="MASK" maskcontentunits="userSpaceOnUse" maskunits="userSpaceOnUse"><image height="100%" width="100%" xlink:href="https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif"></image></mask></defs><g mask="url(#MASK)"><image height="100%" href="https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif" width="100%" x="0" y="0%"></image></g></svg>

初看SVG代码可能比较复杂，建议将其分解成两部分：

定义遮罩：

<defs><mask id="MASK" maskcontentunits="userSpaceOnUse" maskunits="userSpaceOnUse"><image height="100%" width="100%" xlink:href="https://media.giphy.com/media/tIwmTQ64D52XTuL8xd/giphy.gif"></image></mask></defs>

使用遮罩：

<g mask="url(#MASK)"><image height="100%" href="https://media.giphy.com/media/MXQnyEQwBJ6eTj90L5/giphy.gif" width="100%" x="0" y="0%"></image></g>

这样一来，代码就清晰易懂多了。 这就是使用两个GIF作为SVG遮罩的巧妙方法。

Cassie还制作了另一个例子，这次是一个跳跃的太空怪兽。

以上是用其他GIF掩盖GIF的详细内容。更多信息请关注PHP中文网其他相关文章！