Синхронизированный переход слайдов цвета переднего плана (текста) и цвета фона. ⇐ CSS

[Anonymous]

У меня есть следующая настройка:


< pre class="snippet-code-css lang-css Prettyprint-override">

Код: Выделить всё

.text-container {
position: relative;
width: 300px;
height: 50px;
overflow: hidden;
background: #FBFBFD;
border: 1px solid #ccc;
}

.blended-text {
font-size: 24px;
font-weight: bold;
color: white;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 2;
mix-blend-mode: difference;
}

.text-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: #21B250;
z-index: 1;
transition: width 1s ease-in-out;
}

.text-container:hover::before {
width: 100%;
}

Код: Выделить всё

Dynamic Text

Как видите, я пытаюсь изменить цвет текста. по мере изменения фона.
Я пытался использовать некоторые из существующих режимов смешивания-наложения, но мне не удалось добиться того, чтобы текст стал белым на зеленом фоне, но оставался черным на светло-сером фоне.
Можно ли добиться такого с помощью режим смешивания? Мне действительно нужно такое же поведение режима смешивания-наложения, при котором только часть текста меняла свой цвет во время перехода.
Я думаю, невозможно определить собственное смешивание-наложение -режим, верно?

Подробнее здесь: https://stackoverflow.com/questions/792 ... und-colour