创建动画调整蒙版(混合模式)

Question

下面的动画是在Adobe 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>

​