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;
}

Codepen

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

动画文字填充混合混合模式

1 个答案: