更改动画波浪边缘的文本颜色

Question

我正在尝试将剪贴蒙版应用于动画波浪。最终结果应如下所示：

经过研究，我发现了一个codepen，它适用于不透明度，但不幸的是，它不适用于这种对比度。

这是codepen的一部分：

<div class="loading wave">
  This is text
</div>

<style>
    .loading{
      font-size:100pt;
      height:120px;
      line-height:110px;
      vertical-align:bottom;
      display:block;
    }

   .wave {
      background-image: url("http://i.imgur.com/uFpLbYt.png");
      background-clip: text;
      color: transparent;
      text-shadow: 0px 0px rgba(255, 255, 255, 0.06);
      animation: wave-animation 1s infinite linear, loading-animation 10s infinite linear alternate;
      background-size: 200px 100px;
      background-repeat: repeat-x;
      opacity: 1;
   }
</style>

我想在蓝/白颜色对比上使用 codepen 的动画。有谁知道解决办法吗？

Answer 1

这是基于mix-blend-mode: difference; 的另一种解决方案，详情请访问CSS mix-blend-mode 和CSS mix-blend-mode。它基于 webpage 和您提供的 codepen。

* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  height: 100%;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  background-image:url('http://i.imgur.com/uFpLbYt.png');
  color:rgba(0,0,0,0);
text-shadow:0px 0px rgba(255,255,255,0.06);
  animation:wave-animation 1s infinite linear, loading-animation 10s infinite linear alternate;
  background-size:450px 300px;
  background-repeat:repeat-x;
  background-position: bottom;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Nocturno Display Medium 4", Georgia;
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  height: 180px;
  width: 100%;
}

.box {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 8vw;
  color: white;
  background-size: cover;
  mix-blend-mode: difference;
  height: 400px;
  height: 300px;
  width: 100%;
  text-align: center;
  text-transform: uppercase; 
  p {
text-rendering: optimizeLegibility;
word-spacing: 5px;
margin: 0;
  }
}


@import "compass/css3";
body{
 background:#141414; 
  width:100%;
  height:100%;
}

@keyframes wave-animation{
  0%{background-position:0 bottom};
  100%{background-position:400px bottom};
}
@keyframes loading-animation{
  0%{background-size:200px 0px};
  100%{background-size:200px 400px};
}

   <div class="wrapper">
  <div class="box">
<p class="wave">Loading</p>
  </div>
</div>