Я пытаюсь создать анимированный фон градиента с прозрачным («вырезанным») текстом поверх анимированного фона градиента.Сочетание фоновых анимаций CSS и прозрачного текста заливки цвета
В настоящее время у меня есть анимированный фон градиента - в основном, используя код отсюда: 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
Как о с SVG масками, как [это] (https://jsfiddle.net/sqhesuwp/1/). Это может стать очень сложным с CSS (если вообще это достижимо). – Harry
Большое спасибо за предложение, это, возможно, предпочтительный способ сделать это. –
Добро пожаловать, приятель. Просто обратите внимание на «-webkit-background-clip: text», это нестандартное значение, которое не будет работать в браузерах не WebKit, и нет никаких сомнений в том, что он не будет удален. (* Редактирование: * Я исправляюсь. [Кажется, что FF поддерживает это с v49] (https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip), но он по-прежнему не рекомендуется для производства). – Harry