CSS-маскирование: использование двух или более масок для одного изображения или видео. ⇐ CSS

[Anonymous]

это код:

Код: Выделить всё

.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 */
}

Код: Выделить всё

Your browser does not support HTML5 video.





Your browser does not support HTML5 video.

Как сейчас, у нас есть две маски с двумя экземплярами одного и того же видео, но мне нужно одно видео с двумя масками. Могу ли я это сделать? Использовать несколько масок в одном видео: я могу разместить несколько масок в видео, а также контролировать, где разместить маску. Например, первая маска в верхнем правом углу, вторая в левом нижнем углу и т. д.
Спасибо за ответы
P.S: Чтобы уточнить это немного подробнее, чего я хочу достичь: допустим, у нас есть лошадь, бегущая по видео слева направо. У нас есть две маски, звезда и круг, помещенные в одно видео. Звезда находится слева, а круг справа. Сначала лошадь должна быть видна в звезде слева, затем в круге. Надеюсь, вы понимаете, к чему я клоню

Подробнее здесь: https://stackoverflow.com/questions/793 ... e-or-video