Question

我正在尝试在动画渐变背景的顶部创建一个带有透明（“剪切”）文本的动画渐变背景。

目前我有一个动画渐变背景 - 基本上使用此处的代码：https://www.gradient-animator.com/

然后我在顶部有一个绝对定位的元素，黑色背景和混合混合模式属性（目前变暗）。

这仍然看起来不正确，因为混合混合模式也会影响背景，我只希望文本发生变化。

我在这里有一个非常粗略的想法：https://codepen.io/twentyonehundred/pen/pNjpJW灰色背景明显泄漏某些颜色（黑色背景没有）。可能有更好的方法来实现我想要的效果？

代码：

.element {
  height: 250px;
  width: 100%;
  background: linear-gradient(135deg, #2efdc7, #d71414, #146ed7);
  background-size: 600% 600%;
  animation: AnimationName 7s ease infinite;
}
@keyframes AnimationName {
  0% {
    background-position: 0% 43%
  }
  50% {
    background-position: 100% 58%
  }
  100% {
    background-position: 0% 43%
  }
}
div {
  position: relative;
}
h1 {
  color: #fff;
  background-color: #23282d;
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 10vw;
  font-weight: 100;
  mix-blend-mode: darken;
}

<div>
  <div class="element"></div>
  <h1>abcd</h1>
</div>

解决方案示例

以下是Federico建议的工作解决方案示例。

https://codepen.io/twentyonehundred/pen/pNjpJW

Answer 1

尝试使用-webkit-background-clip: text;

.element {
  width: 100%;
  height: 100px;
  background: #23282d;
}
h1 {
  font-family: Arial;
  font-size: 10vw;
  background: -webkit-linear-gradient(135deg, #2efdc7, #d71414, #146ed7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 600% 600%;
  animation: AnimationName 7s ease infinite;
}
@keyframes AnimationName {
  0% {
    background-position: 0% 43%
  }
  50% {
    background-position: 100% 58%
  }
  100% {
    background-position: 0% 43%
  }
}

<div class="element">
  <h1>abcd</h1>
</div>

结合CSS背景动画和透明文本填充颜色

1 个答案: