Я не вижу большого простого способа сделать это. Быстрый щелчок правой кнопкой мыши -> Inspect показывает, что даже на сайте, на который вы ссылаетесь, анимация <canvas> используется для рисования всего эффекта (т. Е. Это не CSS - это просто картинка). Вот некоторые варианты, но они либо не совсем завершены, либо для их реализации потребуется много времени.
Вариант 1.) Самый быстрый способ получить аналогичный эффект - добавить сочетание свойств CSS. -blend-mode: экран; на ваши ссылки и удалите правило color: #fff;. Однако новый цвет будет выглядеть несколько блеклым:
.tabs a {
position: relative;
width: 200px;
mix-blend-mode: screen;
}
Вариант 2.) Создайте анимацию с <canvas>, как это делает ссылочный сайт, или анимированные картинки, которые меняются, когда пользователь нажимает на область вкладок. Любой из этих процессов займет много времени, так как вам придется либо создавать изображения, либо кодировать анимацию.
Вариант 3.) Оберните каждую букву в <span> и используйте setTimeouts в JavaScript установить, когда менять цвет каждого из них, основываясь на длине вашей анимации и в каком направлении движется селектор (или настроить CSS анимаций для каждой из них, если вы не против их исчезновения, а не немедленного изменения цвета) , Одна проблема здесь заключается в том, что вся буква будет менять цвет сразу, а не только немного за раз.
Вариант 4.) Если у вас есть полный контроль над расположением и размером элементов навигации, вы можно воспроизвести эффект, написав МНОГО CSS (поэтому я не буду пытаться выяснить все это здесь, но я объясню, как это сделать). Это может потребовать больше усилий, чем оно того стоит.
Создайте копию каждой ссылки, скажем, создайте два пролета в каждой гиперссылке с одинаковым текстом в каждом пролете. Расположите интервалы непосредственно друг над другом так, чтобы соответствующие тексты перекрывались (т. Е. Вы не должны видеть текст снизу).
Установите цвет текста нижнего слоя на белый, а верхний - на # 3e40db. Свойство CSS clip-path является анимируемым, поэтому вы можете использовать анимацию CSS, чтобы скрыть верхний слой пролета при перемещении по нему селектора div (поскольку у вас есть контроль над размерами элементов, временем перехода и временем анимации, вам следует быть в состоянии сделать это с достаточным количеством времени, вложенного в это). По сути, clip-path может «обрезать» прямоугольную область angular того, что отображается в элементе, поэтому, если вам приходится перекрывать элементы div, то уменьшая / увеличивая эту прямоугольную область angular с помощью управляемых анимаций, вы можете точно контролировать когда горизонтальный прямоугольник angular область вершины скрыта (то есть показана нижняя часть). Опять же, основная проблема заключается в том, что для написания / реализации потребуется много кода и много времени, потому что вам нужно оттачивать абсолютное позиционирование, синхронизацию и учет, если селектор перемещается влево или вправо по div , Но если вы готовы потратить время и работу, настройка basi c будет выглядеть примерно так:
@keyframes clip-animation-from-left {
0% {
clip-path: polygon(0px 0px, 0px 0px, 0px 300px, 0px 300px);
}
50% {
clip-path: polygon(150px 0px, 300px 0px, 300px 300px, 150px 300px);
}
100% {
clip-path: polygon(300px 0px, 300px 0px, 300px 300px, 300px 300px);
}
}
/* You'll have to rewrite some JavaScript to add/remove classes determining which way the selector is coming */
.tabs a.active-from-left {
animation-name: clip-animation-from-left;
animation-duration: .4s;
}