Masquer les gifs avec d'autres gifs

Cassie Evans a récemment partagé une astuce intelligente: utiliser des masques SVG pour superposer un gif sur un autre, surtout si les GIF colorés sont superposés aux GIF monochromes.

Comme je n'ai jamais utilisé de masques SVG auparavant, j'ai essayé d'interpréter le code de Cassie et j'ai constaté que son principe est étonnamment simple.

Tout d'abord, sélectionnez le GIF utilisé comme masque SVG, par exemple, obtenez-le sur le site Web de Giphy.

Ensuite, écrivez le code SVG directement dans HTML. Ajouter d'abord<defs></defs> Tags, utilisés pour stocker des ressources qui seront référencées plus tard dans d'autres parties du 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>

Avis<mask></mask> id="MASK" ajouté dans l'élément référendra le masque plus tard via cet attribut.

Ensuite, sélectionnez un autre GIF comme image sous-jacente (par exemple, un GIF pour une scène spatiale).

Ajoutez ce gif à<g></g> Dans l'élément et appliquer l'attribut de masque:

<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>

Au début, le code SVG peut être plus compliqué, il est donc recommandé de le décomposer en deux parties:

Définir le masque:

<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>

Utilisez des masques:

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

De cette façon, le code devient beaucoup plus clair et plus facile à comprendre. C'est la façon intelligente d'utiliser deux GIF comme masques SVG.

Cassie a également fait un autre exemple, cette fois un monstre d'espace de saut.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!