CSS-Maskierung: Verwendung von zwei oder mehr Masken für ein Bild oder Video ⇐ CSS

[Guest]

Das ist der Code:

Code: Select all

Your browser does not support HTML5 video.





Your browser does not support HTML5 video.

Code: Select all

.mask1 {
-webkit-mask-image: url(catTwo.png);
mask-image: url(catTwo.png);
mask-repeat: no-repeat;
mask-size: 300px 300px;
width: 400px;
}

.mask2 {
-webkit-mask-image: url(catTwo.png);
mask-image: url(catTwo.png);
mask-repeat: no-repeat;
mask-size: 300px 300px;
transform: scaleX(-1);
width: 400px;
/* Mirror-invert the element horizontally */
}

So wie es jetzt ist, haben wir zwei Masken mit zwei Instanzen desselben Videos, aber ich möchte ein Video mit zwei Masken. Kann ich das machen? Um mehrere Masken in einem Video zu verwenden, kann ich mehrere Masken innerhalb des Videos platzieren und habe auch die Kontrolle darüber, wo die Maske platziert werden soll. Wie die erste Maske in der oberen rechten Ecke, die zweite in der unteren linken Ecke usw.
Danke für die Antworten
P.S.: Um das etwas näher zu erläutern, was ich erreichen möchte: Lets Nehmen wir an, wir haben ein Pferd, das von links nach rechts durch das Video rennt. Wir haben zwei Masken, einen Stern und einen Kreis, im selben Video platziert. Der Stern ist links und der Kreis rechts. Zuerst sollte das Pferd im Stern links zu sehen sein, dann im Kreis. Ich hoffe, du verstehst, worauf ich hinaus will