用其他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中文網其他相關文章！