GIFs mit anderen GIFs maskieren

Cassie Evans hat kürzlich einen cleveren Trick geteilt: Verwenden von SVG -Masken, um einen GIF über einen anderen zu überlagern, insbesondere wenn farbige GIFs auf monochromen GIFs überlagert werden.

Da ich noch nie SVG -Masken verwendet habe, habe ich versucht, Cassies Code zu interpretieren und festzustellen, dass sein Prinzip überraschend einfach ist.

Wählen Sie zunächst das GIF aus, das als SVG -Maske verwendet wird. Erhalten Sie sie beispielsweise von der GIPHY -Website.

Schreiben Sie dann den SVG -Code direkt in HTML. Zuerst hinzufügen<defs></defs> Tags, verwendet, um Ressourcen zu speichern, auf die später in anderen Teilen des SVG verwiesen wird:

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

Beachten<mask></mask> id="MASK" -Merkmal verweist die Maske später über dieses Attribut.

Wählen Sie als nächstes ein anderes GIF als zugrunde liegendes Bild aus (z. B. ein GIF für eine Weltraumszene).

Fügen Sie dieses GIF hinzu zu<g></g> Im Element und wenden Sie das Maskenattribut an:

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

Am Anfang kann der SVG -Code komplizierter sein, sodass er in zwei Teile unterteilt wird:

Maske definieren:

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

Verwenden Sie Masken:

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

Auf diese Weise wird der Code viel klarer und leichter zu verstehen. Dies ist der clevere Weg, zwei GIFs als SVG -Masken zu verwenden.

Cassie machte auch ein weiteres Beispiel: Diesmal ein springendes Raummonster.

Das obige ist der detaillierte Inhalt vonGIFs mit anderen GIFs maskieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!