Есть табы.
По умолчанию цвет текста - серый. При переключении нужно чтобы красный цвет плавно заменял серый со смещением. Вот так
Под табом должна быть черточка. Думается что все красное должно быть одним блоком. Можно как то сделать так, чтобы по выбору таба, этот красный блок туда-сюда ездил, закрашивая плавно текст со смещением цвета?
Какие-то решения есть с -webkit-background-clip: text; и -webkit-text-fill-color: transparent; но результат не получил. Может кто делал такое, есть рабочие примеры.
Аналог - табы в Твиттере.
Есть вот такой вариант - Но, при этом не проскроллить табы по горизонтали. Мешается -webkit-background-clip: text; Ну а без него не работает((
.clip-text {
margin-left: 100px;
margin-top: 100px;
border: 1px solid green;
display: flex;
font-size: 20px;
width: 400px;
font-weight: bold;
line-height: 1;
position: relative;
color: red;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
overflow-x: auto;
background-image: url(https://picsum.photos/480/200?random);
background-color: red;
background-size: 100px 100%;
background-repeat: no-repeat;
background-position: 20px;
}
span {
margin-right: 20px;
}
<div class="wrapper">
<div class="clip-text">
<span>JINTOS</span>
<span>22JINTOS</span>
<span>JINTOS</span>
<span>22JINTOS</span>
<span>JINTOS</span>
<span>22JINTOS</span>
<span>JINTOS</span>
<span>22JINTOS</span>
<span>JINTOS</span>
<span>22JINTS</span>
</div>
</div>