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

Question

下面的动画是在 Adobe AE 中创建的，只需移动添加了红色调的图像蒙版即可。

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

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>

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

Creating an animated adjustment mask (blend mode)

javascript

css

animation

css-mask