Создание анимированной корректирующей маски (режим наложения)

#javascript #css #animation #css-mask

#javascript #css #Анимация #css-маска

Вопрос:

Приведенная ниже анимация была создана в Adobe AE простым перемещением масок изображений с добавлением красных оттенков.

Я пытаюсь понять, как добиться чего-то подобного в CSS / JS (возможно ли это вообще?). Сам оттенок может быть обработан режимами наложения, но перемещение маски / корректирующего слоя без перемещения замаскированного изображения кажется сложным.

Ответ №1:

Используя CSS-маску, это возможно. Ниже приведен базовый пример, в котором хитрость заключается в том, чтобы иметь 3 маски, и мы анимируем положение каждой из них. Остальное просто, два слоя друг над другом с одинаковыми изображениями и верхний с режимом наложения:

 .box {
  width:500px;
  height:300px;
  padding:80px 200px 80px 80px;
  background:url(https://picsum.photos/id/1074/800/800) center/contain padding-box content-box;
  box-sizing:border-box;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:inherit;
  background-color: red;
  background-blend-mode: darken;
  -webkit-mask:            /* position  / size */
    linear-gradient(#fff 0 0) 90px 0    /80px  100px,
    linear-gradient(#fff 0 0) 50px 100% /60px  60px,
    linear-gradient(#fff 0 0) 100% 50%  /150px 70px;
  -webkit-mask-repeat:no-repeat;
  animation: move 2s linear infinite alternate;
}
@keyframes move {
  to {
    -webkit-mask-position:
        90px 30%,
        50px 70%,
        50%  50%;
  }
}

 <div class="box">

</div>