如何使用background-blend-mode实现类似叠加层的渐变动画效果

编辑 #

代码本身不存在问题，仅CodePen平台无法正确展示该动画效果。

针对该需求的常规解决方案是绝对定位一个半透明背景的叠加层容器，背景可使用纯色、linear-gradient（线性渐变）、radial-gradient（径向渐变）、conic-gradient（锥形渐变）甚至url(图片)资源，若使用图片通常会搭配opacity属性调整透明度。

目前有一个兼容性较好的新CSS属性background-blend-mode，在非动画场景下可以通过不同的实现逻辑达到和上述叠加层相同的效果。

对应静态效果代码如下：

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
}
div {
  --sqrt2: 1.4142135623730950488016887242097;
  --size: 300px;
  --x: 0%;
  --y: 0%;
  margin: auto;
  height: var(--size);
  width: var(--size);
  
  background: url(https://i.picsum.photos/id/695/800/600.jpg?hmac=TL1K4j89C4vOeDFLlzW0-BaQ2RQMMPW_4W3bW62nChM), radial-gradient(circle calc(var(--size) * var(--sqrt2)) at var(--x) var(--y), lightblue 0%, lightblue 20%, lightgreen 40%, lightcoral 60%, lightyellow 80%, lightyellow 100%);
  background-blend-mode: luminosity; /* normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity */
  background-size: cover;
}

<div></div>

当前遇到的问题是尝试对radial-gradient（径向渐变）添加动画时出现异常：常规方案下直接对渐变坐标添加动画即可正常展示，但使用background-blend-mode时动画无法正常生效。

我认为代码编写没有错误，该问题可能是CSS本身的bug，仍希望能获得相关解决方案建议。

带动画逻辑的完整代码如下：

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
}
@property --x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
@property --y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
div {
  --sqrt2: 1.4142135623730950488016887242097;
  --size: 300px;
  --x: 0%;
  --y: 0%;
  margin: auto;
  height: var(--size);
  width: var(--size);
  
  background: url(https://i.picsum.photos/id/695/800/600.jpg?hmac=TL1K4j89C4vOeDFLlzW0-BaQ2RQMMPW_4W3bW62nChM), radial-gradient(circle calc(var(--size) * var(--sqrt2)) at var(--x) var(--y), lightblue 0%, lightblue 20%, lightgreen 40%, lightcoral 60%, lightyellow 80%, lightyellow 100%);
  background-blend-mode: luminosity; /* normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity */
  background-size: cover;
  -webkit-animation: roundabout 30s infinite ease-in-out both;
  -moz-animation: roundabout 30s infinite ease-in-out both;
  -o-animation: roundabout 30s infinite ease-in-out both;
  animation: roundabout 30s infinite ease-in-out both;
}

@-webkit-keyframes roundabout {
  100%, 0% { --x: 0%; --y: 0% }
  25% { --x: 100%; --y: 0% }
  50% { --x: 100%; --y: 100% }
  75% { --x: 0%; --y: 100% }
}
@-moz-keyframes roundabout {
  100%, 0% { --x: 0%; --y: 0% }
  25% { --x: 100%; --y: 0% }
  50% { --x: 100%; --y: 100% }
  75% { --x: 0%; --y: 100% }
}
@-o-keyframes roundabout {
  100%, 0% { --x: 0%; --y: 0% }
  25% { --x: 100%; --y: 0% }
  50% { --x: 100%; --y: 100% }
  75% { --x: 0%; --y: 100% }
}
@keyframes roundabout {
  100%, 0% { --x: 0%; --y: 0% }
  25% { --x: 100%; --y: 0% }
  50% { --x: 100%; --y: 100% }
  75% { --x: 0%; --y: 100% }
}

<div></div>

内容的提问来源于stack exchange，提问作者s3c