CSS 배경 애니메이션과 투명한 텍스트 채우기 색상

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>

솔루션의 예 아래

는 작업 솔루션의 예입니다.

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

Answer 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>