Подобрать цвет для анимации курсора и диапазона внутри
Я использую призму для отображения токенов, и наверху, если у меня есть курсор, который оживляет мигание, проблема в том, что цвет токена установлен почти на тот же цвет, что и фон курсора:
Вот минимальный пример:
@keyframes terminal-blink {
0%, 100% {
background-color: var(--background, #000);
color: var(--color, #aaa);
border-bottom: none;
border-left: none;
margin-left: 0;
}
50% {
background-color: var(--color, #aaa);
color: var(--background, #000);
border-bottom: none;
border-left: none;
margin-left: 0;
}
}
.cursor.blink {
-webkit-animation: terminal-blink 1s infinite steps(1, start);
-moz-animation: terminal-blink 1s infinite steps(1, start);
-ms-animation: terminal-blink 1s infinite steps(1, start);
animation: terminal-blink 1s infinite steps(1, start);
}
body {
background: black;
font-family: monospace;
}
.token.punctuation {
color: #999;
}
.token.tag {
color: red;
}<div>
<span class = "cursor blink">
<span style = "font-weight:bold;" class = "token punctuation" data-text = "<"><</span>
</span>
</div>
<br/>
<div>
<span class = "cursor blink">
<span style = "font-weight:bold;" class = "" data-text = "x">x</span>
</span>
</div>
<div>
<span class = "cursor blink">
<span style = "font-weight:bold;" class = "token tag" data-text = "x">x</span>
</span>
</div>Я попытался установить другую анимацию, которая перезапишет .token.punctuation, используя:
@keyframes prism-cursor {
0%, 100% {
color: currentColor;
}
50% {
color: #000;
}
}
.cursor .token {
animation: prism-cursor 1s infinite steps(1, start);
}
но это не работает и не синхронизируется, похоже, что есть 3-х шаговая анимация.
Я хочу иметь color: var(--color), когда курсор виден (анимация на 50%), но цвет из .token, когда курсор невидим 0%, 100%. (.token.tag должен быть красным на черном фоне и черным на сером).
Вот пример фактического кода, который у меня есть https://codepen.io/jcubic/pen/MqyvEG
Возможно ли что-то подобное без модификации .token css или html?
Ответы 3
Вы можете создать еще один ключевой кадр, который соответствует времени первого и синхронизирует изменение цвета.
@keyframes terminal-blink {
0%, 100% {
background-color: var(--background, #000);
color: var(--color, #aaa);
border-bottom: none;
border-left: none;
margin-left: 0;
}
50% {
background-color: var(--color, #aaa);
color: var(--background, #000);
border-bottom: none;
border-left: none;
margin-left: 0;
}
}
@keyframes textHighlight {
0%, 100% {
color: red;
}
50% {
color: blue;
}
}
.cursor.blink {
-webkit-animation: terminal-blink 1s infinite steps(1, start);
-moz-animation: terminal-blink 1s infinite steps(1, start);
-ms-animation: terminal-blink 1s infinite steps(1, start);
animation: terminal-blink 1s infinite steps(1, start);
}
.token {
-webkit-animation: textHighlight 1s infinite steps(1, start);
-moz-animation: textHighlight 1s infinite steps(1, start);
-ms-animation: textHighlight 1s infinite steps(1, start);
animation: textHighlight 1s infinite steps(1, start);
}
body {
background: black;
font-family: monospace;
}<div>
<span class = "cursor blink">
<span style = "font-weight:bold;" class = "token" data-text = "<"><</span>
</span>
</div>
<br/>
<div>
<span class = "cursor blink">
<span style = "font-weight:bold;" class = "token" data-text = "x">x</span>
</span>
</div>Проблема в том, что у меня есть цвета в .token, и я хочу, чтобы они были в анимации, желательно без модификации класса .token.
Сначала я предлагаю рассмотреть что-нибудь еще, кроме steps. Как я объяснил в другом вопросе (Анимация переключения цвета границы CSS: неверный цвет "от"), это может привести к путанице в том, как это работает.
Учитывая это, вы можете легко применить вторую анимацию без проблем с синхронизацией:
@keyframes terminal-blink {
0%,
50% {
background-color: var(--background, #000);
color: var(--color, #aaa);
border-bottom: none;
border-left: none;
margin-left: 0;
}
50.1%,
100% {
background-color: var(--color, #aaa);
color: var(--background, #000);
border-bottom: none;
border-left: none;
margin-left: 0;
}
}
@keyframes prism-cursor {
0%,
50% {
color: var(--c,white);
}
50.1%,
100% {
color: #000;
}
}
.cursor.blink {
animation: terminal-blink 1s infinite linear;
}
body {
background: black;
font-family: monospace;
}
.token.punctuation {
--c:red;
color: var(--c);
animation: prism-cursor 1s infinite linear;
}<div>
<span class = "cursor blink">
<span style = "font-weight:bold;" class = "token punctuation" data-text = "<"><</span>
</span>
</div>
<br>
<div>
<span class = "cursor blink">
<span style = "font-weight:bold;" class = "" data-text = "x">x</span>
</span>
</div>И вы можете сократить код до одной анимации, если переместите все классы на один уровень:
@keyframes terminal-blink {
0%,
50% {
background-color: var(--background, #000);
color: var(--c, #aaa);
border-bottom: none;
border-left: none;
margin-left: 0;
}
50.1%,
100% {
background-color: var(--color, #aaa);
color: var(--background, #000);
border-bottom: none;
border-left: none;
margin-left: 0;
}
}
.cursor.blink {
animation: terminal-blink 1s infinite linear;
}
body {
background: black;
font-family: monospace;
}
.token {
--c:red;
color: var(--c);
}
.punctuation {
--c:green;
color: var(--c);
}<div>
<span class = "cursor blink token ">
<span style = "font-weight:bold;" data-text = "<"><</span>
</span>
</div>
<br>
<div>
<span class = "cursor blink punctuation">
<span style = "font-weight:bold;" class = "" data-text = "x">x</span>
</span>
</div>@jcubic --c определен в классе :) поэтому он возьмет его оттуда;) и если ничего не определено, он будет белым ... проверьте мое обновление, я добавил еще один пример
Я не заметил полосу прокрутки, поэтому кажется, что без --c невозможно, я хотел использовать prismjs css без изменений.
@jcubic какие вещи нельзя обновить? Я не знаю как работает prismjs
.token и .punctuation пришли из prismjs, и я ввожу их в .cursor, я бы не хотел изменять класс курсора на основе вывода призмы, потому что мне нужно было бы проанализировать вывод призмы и изменить DOM для обновления. Вот пример того, что у меня есть codepen.io/jcubic/pen/MqyvEG
Я отмечаю ваше решение, так как оно почти решает мою проблему, единственная проблема в том, что мне нужно изменить классы .token.
@jcubic хорошо понял, обновлю, если найду обходной путь
Я решил использовать другое решение, которое требует от меня добавлять только диапазон внутри диапазона, который имеет цвет и / или фон, я добавил свой собственный ответ.
Я получил этот код. Сначала я добавил еще один диапазон внутри того, у которого есть фон, и применил этот код:
.cmd span[data-text] span {
background: inherit;
color: inherit;
}
.cmd .cursor.blink > span[style* = "background"] span {
animation: terminal-blink-span 1s infinite steps(1, start);
position: absolute;
top: 0;
}
.cmd .cursor.blink > span[style* = "background"] {
postion: relative;
min-width: 1ch;
display: inline-block;
}
/*
* I've created another css var here, because
* I've added --color to span and I've needed to
* have a way to select original color as backgound
* for cursor animation
*/
.cmd {
--original-color: var(--color, #aaa);
}
@keyframes terminal-blink-span {
0%, 100% {
background: inherit;
color: inherit;
}
50% {
background: var(--original-color, #aaa);
color: var(--background, #000);
}
}
Это не сработает, потому что я хочу иметь цвет: var (- color), когда курсор виден (анимация на 50%), но цвет из .token, когда курсор невидим 0%, 100%.