CSSの背景のアニメーションと透明なテキストの塗りつぶしの色を組み合わせる

Question

アニメーショングラデーションの背景の上に透明な（「カットアウト」）テキストのアニメーショングラデーションの背景を作成しようとしています。私はアニメーション勾配の背景を持っている時点で

- 基本的にはここからコードを使用して：https://www.gradient-animator.com/

そしてIは、（黒い背景と混合ブレンドモード属性とトップ上絶対配置要素が現在暗く）。

これは、ミックスブレンドモードがバックグラウンドにも影響するため、正しく表示されません。テキストを変更したいだけです。

私はここで非常に大まかなアイデアを持っています：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>

溶液以下の実施例

は、作業溶液の一例です。

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

Answer 1

[この]（https://jsfiddle.net/sqhesuwp/1/）のようなSVGマスクを用いて約どのように-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>