javascript - 创建动画调整蒙版（混合模式）

Question

下面的动画是在 Adob​​e AE 中通过简单地移动带有红色色调的图像蒙版创建的。

我试图弄清楚如何在 CSS/JS 中实现类似的东西（甚至可能吗？）。色调本身可以通过混合模式处理，但在不移动蒙版图像的情况下移动蒙版/调整图层似乎具有挑战性。

Answer 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>