CSS-Maskierung: Verwendung von zwei oder mehr Masken für ein Bild oder Video
Posted: 20 Jan 2025, 17:40
Das ist der Code:
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
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 */
}
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