Примените изображение с эффектом динамического блеска к другому частично прозрачному изображению с помощью CSS ⇐ CSS

[Anonymous]

Я хочу применить эффект анимационного мерцания к определенным изображениям на моей веб-странице. Все изображения имеют произвольную форму и имеют прозрачные части. Я хочу, чтобы блеск применялся только к непрозрачным частям этих изображений. Сам блеск я подготовил в виде анимированного файла .webp; он содержит движущиеся волнистые полупрозрачные полосы цветов. Это настолько сложно, что я не хочу создавать его с помощью CSS (если это вообще возможно).
Моя попытка заключалась в том, чтобы сложить два изображения друг на друга с позицией: абсолютный;. Нижнее изображение — это то, которое нужно блестеть, а верхнее — сам блеск. А затем примените режим смешивания: осветлить; (или наложение, или что получится лучше) к изображению с блестками. Это работает, но блеск не распространяется только на непрозрачные части изображения.
Теперь мне интересно, можно ли вообще реализовать этот эффект с помощью простого CSS? Альтернативой является подготовка предварительно блестящих версий всех соответствующих изображений, но из-за размера файла и проблем с обслуживанием я бы предпочел этого не делать.
Вы можете увидеть это в действии в этом коде. перо.
На данный момент у меня есть код:

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

[img]images/icons.png[/img]
[img]images/glint.webp[/img]

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

.icon {
position: relative;
display: inline-block;
background-color: #000080;
}
.icon .type {
width: 24px;
height: 24px;
position: absolute;
top: 0px;
left: 0px;
object-fit: none;
object-position: 0px 0px; /* its a css image sprite */
z-order: 10;
}
.icon .glint {
width: 24px;
height: 24px;
position: absolute;
top: 0px;
left: 0px;
z-order: 11;
mix-blend-mode: overlay;
}

Значки представляют собой обычные изображения размером 24x24, расположенные в виде спрайта (ссылка; нижняя половина — это то, что я сейчас использую как «блестящую» версию, но я хочу сделать ее анимированной). Я еще не завершил работу над изображением с блестками, но загрузил доказательство концепции (ссылка). Сначала я попытался загрузить файл изображения glint webp, но StackOverflow отказался его принять? Чтобы увидеть это в контексте, мой сайт (OMEO) теперь использует статическое предварительно блестящее изображение рядом с раскрывающимися списками элементов. Для любопытных: я хочу воспроизвести эффект мерцания Minecraft для зачарованных предметов.


Подробнее здесь: https://stackoverflow.com/questions/790 ... -using-css