css - 使用混合混合模式填充动画文本

Question

我遇到了问题，如果我删除“.box-with-text”的“背景颜色”，则文本填充不起作用。

.box-with-text {
  text-transform: uppercase;
  font: bold 6rem Open Sans, Impact;
  background: black;
  color: white;
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
.container {
  display: flex;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 5s;
  animation-fill-mode: forwards;
  text-align: center;
}

密码笔

Answer 1

我在这里猜测您所说的“不起作用”是什么意思，并假设您正在寻找的是在白色背景上的白色文本被动画填充为红色（请扩展您的问题以解释这一点这不是你想要做的）。

您将需要使用不同的混合模式来实现此效果，您可以通过将前景设为黑色和背景设为白色并使用屏幕混合模式来实现：

.box-with-text {
    text-transform: uppercase;
    font: bold 6rem Open Sans, Impact;
    background: white;
    color: black;
    mix-blend-mode: screen;
}

见：http ://codepen.io/Godwin/pen/oLYYvr?editors=1100