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

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>