Начинаем работать с CSS-счётчиками


Содержание

Счетчики на CSS

Все мы знаем про тег нумерованных списков OL. В этой статье я расскажу, как сделать нумерацию у любых блоков: без всякого JavaScript c помощью CSS можно подписать любые блоки цифрами от 1 до N. Наиболее часто это используется в заголовках, имеющих различные уровни, например 1, 1.1, 1.2 и т.д.

Первое, что нужно сделать, это придумать идентификатор для счетчика. Он может быть любым, например, назовем его blockNum. Затем, нужно установить счетчику начальное значение с помощью свойства CSS:

Таким образом, мы сбросили счетчик blockNum (установили его в ноль) для класса blocks, который объединяет наши нумерованные блоки.

Затем, для каждого элемента из серии блоков нужно установить инкремент счетчика. Допустим, что в качестве блоков мы используем теги LI, обрамленные OL. Тогда код CSS пополнится следующей записью:

Теперь, после того, как счетчик настроен, надо вывести его значения. Это можно сделать с помощью псевдокласса:

Всё, счетчик настроен и будет выводиться. Можно убедиться в этом на работающем примере:

В этом же примере можно увидеть нумерованные заголовки разделов со вложенной нумерацией.

Привожу еще несколько примеров с расширенными параметрами при использовании указанных свойств:

Как сделать элемент формы “счетчик” с кнопками больше меньше?

Как сделать кнопку такого вида? Есть ли такой стандартный элемент формы для выбора?

4 ответа 4

Тот элемент, что вы продемонстрировали не есть счётчик. Это Select-бокс. Именно счётчика нет, а вот указанный, товарищем @эмиль, элемент — будет работать только в Chrome. Вы можете воспользоваться ряшечками JQuery-UI. Если не изменяет память там есть такой элемент. Или используйте Он хотя бы поддерживается 3 из 4 мажорных. Если хотите конечно, вы можете написать ручками на JS. Допустим так:

CSS счетчики

На этой странице

CSS счетчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счетчики реализованы в CSS 2.1 (ссылка на спецификацию).

Значение счетчика сбрасывается (инициализируется) при помощи counter-reset .

counter-increment может быть отображен на странице, используя функцию counter() или counters() в свойстве content .

Использование счетчиков

Для того, чтобы использовать CSS счетчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счетчика — используйте функцию counter(). Следующий пример прибавляет в начале каждого h3 элемента «Section :».

Вложенные счетчики

CSS счетчики могут быть очень полезны для создания нумерованых списков, потому что новая сущность CSS счетчика автоматически создается в дочерних элементах. Используя функцию counters(), можно вставить строку между разными уровнями вложенных счетчиков. Пример:

CSS Counters

Pizza

Hamburger

Hotdogs

CSS счетчики являются «переменные» поддерживается CSS, чьи значения могут быть увеличены на CSS правила (для отслеживания, сколько раз они используются). Счетчики позволяют настраивать внешний вид содержимого на основе его размещения в документе.

Автоматическая нумерация с счетчиками

Счетчики CSS похожи на «переменные». Значения переменных могут быть увеличены с помощью правил CSS (которые отслеживают, сколько раз они используются).

Для работы с счетчиками CSS мы будем использовать следующие свойства:

  • counter-reset — Создает или сбрасывает счетчик
  • counter-increment — Увеличивает значение счетчика
  • content — Вставка сгенерированного содержимого
  • counter() or counters() Function-добавляет значение счетчика к элементу

Чтобы использовать счетчик CSS, его необходимо сначала создать с counter-reset .

В следующем примере создается счетчик для страницы (в селекторе тела), затем увеличивается значение счетчика для каждого элемента

и добавляется «раздел :» в начало каждого элемента

Пример

h2::before <
counter-increment: section;
content: «Section » counter(section) «: «;
>

Вложенные счетчики

В следующем примере создается один счетчик для страницы (раздела) и один счетчик для каждого элемента

(подраздел). Счетчик «Секция» будет учитываться для каждого элемента

с «сечением .», а счетчик «подраздел» будет учитываться для каждого элемента

Пример

h1 <
counter-reset: subsection;
>

h1::before <
counter-increment: section;
content: «Section » counter(section) «. «;
>

h2::before <
counter-increment: subsection;
content: counter(section) «.» counter(subsection) » «;
>

Счетчик также может быть полезен для составления списков, так как новый экземпляр счетчика автоматически создается в дочерних элементах. Здесь мы используем функцию counters() для вставки строки между различными уровнями вложенных счетчиков:

Пример

ol <
counter-reset: section;
list-style-type: none;
>

li::before <
counter-increment: section;
content: counters(section,».») » «;
>

CSS Счетчики

Использование CSS счетчики

счетчики CSS, как «переменные». Значения переменных может быть увеличено по правилам CSS (который будет отслеживать, сколько раз они используются).

Для работы с CSS счетчиков мы будем использовать следующие свойства:

  • counter-reset — Создает или сбрасывает счетчик
  • counter-increment — Приращивает значение счетчика
  • content — Вставки контент
  • counter() или counters() функция — Добавляет значение счетчика к элементу

Чтобы использовать CSS счетчик, он сначала должен быть создан с counter-reset .

Следующий пример создает счетчик для страницы (в селекторе тела), а затем увеличивает значение счетчика для каждого

элемента и добавляет «Section :» в начале каждого

элемента:

пример

h2::before <
counter-increment: section;
content: «Section » counter(section) «: «;
>

Илон Маск рекомендует:  Тег base

Вложенные счетчики

Следующий пример создает один счетчик (раздел) страницы и один счетчик для каждого

элемента (п). «section» счетчик будет учитываться для каждого

элемента с «Section .» , А «subsection» счетчик будет учитываться для каждого

элемент с » . » :

пример

h1 <
counter-reset: subsection;
>

h1::before <
counter-increment: section;
content: «Section » counter(section) «. «;
>

h2::before <
counter-increment: subsection;
content: counter(section) «.» counter(subsection) » «;
>

Счетчик может также быть полезным, чтобы сделать описанные списки, так как новый экземпляр счетчика автоматически создается в дочерних элементах. Здесь мы используем counters() функции , чтобы вставить строку между различными уровнями вложенности счетчиков:

пример

ol <
counter-reset: section;
list-style-type: none;
>

li::before <
counter-increment: section;
content: counters(section,».») » «;
>

Запуск счетчиков цифр при скролле до них, как сделать?

Есть функция, которая запускает счетчик цифр:

Счетчик работает у элементов с классом «.counter», только эти элементы раскиданы по странице.

Хотел сделать, чтобы они начинали просчитываться в том случае, когда пользователь до них доскралливает, но когда я прописал такую функцию, то сработало некорректно, поскольку у них один класс и функция не может понять, что нужно следить отдельно за каждым элементом.

Подскажите, как правильно реализовать такую функцию, спасибо.

Начинаем работать с переменными CSS — часть 1

Краткое руководство для понимания что такое переменные в CSS и как они делают CSS более мощным и реактивным.

CSS-переменные, которые также называют пользовательскими свойствами (CSS Custom Properties) становятся довольно популярными на данный момент, благодаря своим широким возможностям и реактивному характеру. После прочтения этой заметки у вас появится понимание того, как их можно использовать в повседневной работе.

Эта заметка предназначена для front-end разработчиков среднего уровня (или дизайнеров, способных писать код). Предполагается, что у вы знакомы с CSS, HTML и немного с JavaScript.

Что такое переменные (или CSS переменные)?

В целом, переменная – это контейнер, в котором хранится некоторое значение, к переменной можно обращаться в блоке кода и получать ее значение. В CSS, как в языках программирования, переменные ведут себя аналогично.

Общий синтаксис для переменных CSS показан ниже:

Объявление переменной начинается с символов — — префикса, за которым следует имя переменной. Переменная будет доступна в .CSS-файле или .HTML-файле (при использовании инлайн-стилей) совместно с функцией var . Например, переменная с именем “color” и значением “blue” может быть объявлена как —color: blue и может быть доступна как var(—color) .

Не путайте с синтаксисом JavaScript. В JavaScript var используется для объявления переменных, а в CSS var используется для доступа к значению переменной.

Давайте рассмотрим пример, представленный ниже:

Мы объявили 2 переменные с именами —color-dark и —color-bright . Далее мы обращаемся к ним и получаем значение обеих переменных в классах bright и dark . CSS-переменные можно использовать следующим образом: вместо того, чтобы указывать одни и те же значения CSS-свойств многократно, мы просто ссылаемся на переменные.

Какие проблемы возникают с переменные CSS или пользовательскими свойствами?

Давайте рассмотрим преимущества использования CSS-переменных.

  • Масштабируемый и читаемый код
    При использовании традиционного CSS, мы довольно часто повторяем значения свойств. Это делает наш код не только «топорным», но и трудночитаемым, а также его становится сложно поддерживать при увеличении его объема.
  • Реактивные элементы
    Однажды нам может понадобиться изменить значение переменной, в тот же момент соответствующие HTML-элементы обновятся и поменяют свой внешний вид в соответствии с новыми значениями переменной, что мы увидим в браузере.
  • Ускорение рабочего процесса
    CSS переменные позволяют немного ускорить процесс разработки. Если значение свойства требуется поменять, нам будет нужно всего лишь изменить значение переменной. На это уйдет меньше времени, чем на поиск в коде каждого упоминания свойства и его замену.
  • Продвинутые математические расчеты
    Вы можете выполнять базовые вычисления с использованием основных математических операторов в CSS, используя функцию calc() . Функции calc() может быть передан только 1 параметр с двумя операндами и одним оператором, результат выполнения становится значением свойства CSS. Поддерживаются основные математические операции: сложение(+) , вычитание(-), умножение(*) и деление (/).

Общий синтаксис функции calc() : calc(Операнд1 [Оператор] Операнд2);

Хорошо, что операндом функции calc() может быть CSS переменная. Это делает функцию calc() еще более динамичной и полезной.

Переменные CSS могут использоваться только в современных браузерах и если вы ведете разработку с учетом устаревших браузеров, вам следует отказаться от использования CSS-переменных.

Но почему нет? В наши дни люди отправляют экспедицию на Марс, так что по крайней мере вы должны быть тем либералом работы с кодом.

Надеюсь, что теперь у вас есть общее понимание того, как работают CSS-переменные (пользовательские свойства) и это сделает ваш рабочий процесс масштабируемым и более продуктивным.


СSS Счетчики

Пицца

Гамбургер

Хотдог

CSS счетчики «переменные» поддерживает CSS, значения которого могут увеличить правила CSS (чтобы отслеживать, сколько раз они используются). Счетчики позволяют настроить внешний вид содержимого на основе его размещения в документе.

Автоматическая нумерация счетчиков

CSS счетчики «переменные». Значения переменных могут быть увеличены правилами CSS (который будет отслеживать, сколько раз они используются).

Для работы со счетчиками CSS будем использовать следующие свойства:

  • counter-reset — Создает или сбрасывает счетчик
  • counter-increment — Увеличивает значение счетчика
  • content — Вставка сгенерированного содержимого
  • counter() или функция counters() добавляет значение счетчика на элемент

Чтобы использовать счетчик CSS, его необходимо сначала создать с помощью counter-reset .

В следующем примере создается счетчик для страницы (в селекторе body ), затем увеличивает значение счетчика для каждого элемента

и добавляем значение «Раздел :» к началу каждого элемента

Пример

h2::before <
counter-increment: section;
content: «Раздел» counter(section) «: «;
>

Вложенные счетчики

В следующем примере создается один счетчик для страницы (Раздела) и один счетчик для каждого элемента

(Подраздела).
Счетчик «section» для каждого элемента

в «Раздел .», и «content» счетчик будет подсчитан за каждый элемент

Пример

h1 <
counter-reset: subsection;
>

h1::before <
counter-increment: section;
content: «Раздел» counter(section) «. «;
>

h2::before <
counter-increment: subsection;
content: counter(section) «.» counter(subsection) » «;
>

Счетчик также может быть полезен для создания экземпляра счетчика автоматически создается в дочерних элементов. Здесь мы используем функцию counters() для вставки строки между различными уровнями вложенности счетчика:

Пример

ol <
counter-reset: section;
list-style-type: none;
>

li::before <
counter-increment: section;
content: counters(section,».») » «;
>

Начинаем работать с CSS функцией calc()

Впервые я обнаружила функцию calc() более четырех лет назад, спасибо CSS3 Click Chart, и была рада увидеть, что основные математические функции – сложение, вычитание, умножение и деление – нашли свое применение в CSS.

Илон Маск рекомендует:  Что не надо делать при работе с interbase, firebird, yaffil

Множество людей думает, что препроцессоры полностью покрывают область логики и вычислений, но функция calc() может кое-что из того, что препроцессорам недоступно: смешивать любые типы единиц измерения. Препроцессоры могут смешивать только единицы, между которыми есть фиксированная связь, например, единицы измерения углов, единицы времени, единицы частоты и определенные единицы длины.

1turn всегда равен 360deg , 100grad всегда равны 90deg , а 3.14rad всегда равно 180deg . 1s это всегда 1000ms , а 1kHz это всегда 1000Hz . 1in всегда равен 2.54cm или 25.4mm , или 96px , а 1dppx всегда соответствует 96dpi . Вот почему препроцессоры могут конвертировать их между собой и смешивать их в вычислениях. Тем не менее, препроцессоры не могут решить, сколько в пикселях будут равны 1em или 1% или 1ch , так как им не хватает контекста.

Давайте посмотрим на несколько базовых примеров:

В некоторых случаях мы могли бы использовать переменные в функции calc(). Это вполне возможно с наиболее популярными препроцессорами.

Также мы можем использовать собственные переменные CSS, но обратите внимание, что на данный момент это работает только в Firefox 31+, остальные браузеры пока не поддерживают переменные CSS.

Мы должны иметь в виду несколько вещей, чтобы убедиться, что функция calc() работает. Во-первых, деление на ноль, очевидно, не будет работать. Пробелы между именем функции и круглыми скобками не допускаются. И операторы плюс и минус должны быть окружены пробелами. Это означает, что следующие выражения неправильны:

Функция calc() должна работать в качестве значения во всем местах, где требуется числовое значение с заданием единиц измерения или без него. Тем не менее, хотя основная поддержка и обеспечивается, но мы можем столкнуться с проблемами, зависящими от того, где мы используем данную функцию. Давайте посмотрим на несколько примеров, с какими проблемами в поддержке они сталкиваются (если таковые имеются) и являются ли они лучшими решениями.

Понимание вычисляемых значений

Предположим, нам нужен радужный градиент. CSS для этого довольно прост:

Но HEX значения не достаточно осмысленны. Использование hsl() и calc() , хоть и более многословно, делает всё гораздо яснее:

К сожалению, использование calc() в hsl() , hsla() или rgba() на данный момент не работает в Firefox и Internet Explorer (IE), что означает, что данный код сейчас будет работать только в браузерах на основе WebKit. Поэтому на практике, возможно, лучше пока позволить препроцессору обработать весь этот код, включая и вычисления. И лучший способ использования препроцессора в данном случае – это сформировать список в цикле:

Более эффективный градиентный фон для эластичных элементов

Предположим, нам нужен фон с фиксированными полосами высотой 1em и сверху, и снизу. Одна проблема, мы не знаем высоту элемента. Одно из возможных решений могло бы использовать два градиента:

Это должно работать нормально во всех браузерах, которые поддерживают calc() и градиенты, а так как здесь используется смешивание единиц измерения, то у препроцессоров нет эквивалента для этого выражения. Тем не менее, мы можем сделать код более удобным для сопровождения, использовав переменные:

Примечание: по каким-то причинам в Chrome и Opera одна из полос будет слегка размыта и уже по сравнению с другой.

Диагональные градиентные линии

Предположим, нам нужен элемент с толстой полосой, проходящей по диагонали. Мы могли бы сделать это с помощью остановок, выставленных с помощью процентов:

В этом случае ширина полосы будет зависеть от размеров элемента. Иногда это именно то, что нам нужно. Например, если бы мы хотели воспроизвести флаг с помощью CSS. Добавление немного зеленого, желтого и синего к градиенту, показанному выше, даст нам флаг, который, возможно, узнают любители шоколада, – флаг Танзании.

Но что, если мы хотим, чтобы наша диагональ была фиксированной ширины, которая не зависела бы от размеров элемента? Тогда мы должны использовать calc() и выставить остановки в 50% минус половина фиксированной ширины линии и в 50% плюс половина фиксированной ширины линии. Если мы хотим, чтобы ширина линии была 4em , то должны сделать так:

Вы можете проверить это вживую, изменив размеры окна. Размеры элемента выражены единицах области просмотра, но полоса по диагонали всегда остается одной ширины.

Позиционирование дочерних элементов с известными размерами в центре родительского элемента

Вероятно, вы видели маленький трюк с абсолютным позиционированием элемента в центре родительского элемента намертво:

И мы можем сделать код более удобным для поддержки, используя переменные для ширины и высоты:

Обратите внимание, что использование смещения ( top , left ) для начального позиционирования является безопасным, если вы планируете анимировать положение элемента, для чего вам следует использовать transform . Это потому, что изменения transform требуют только изменение компоновки изображений, тогда как изменение смещения вызывает еще и перекомпоновку, и перерисовку, ухудшая, таким образом, производительность.

Система координат и сетка с началом отсчета в центре

После обнаружения background-position c четырьмя значениями, я была не слишком заинтересована в использовании calc() для позиционирования фона относительно правой или нижней стороны элемента. На calc() оказалась отличным решением для позиционирования определенной точки фона относительно центра элемента.

Пару лет назад я захотела создать фон, который представляет собой систему координат с сеткой, начало отсчета которой было бы намертво прикреплено к середине экрана.

Система координат и сетка

Но как нам реализовать начало координат фона, прикрепленным намертво к середине, а не в верхнем левом углу? Во-первых, background-position: 50% 50% не работает, так как это заставляет точку 50% 50% градиента совпадать с точкой 50% 50% элемента, но линии находятся на верхней и левой стороне градиента соответственно. Решение заключается в использовании calc() и позиционирование градиентов так, что их верхняя и левая стороны находились бы почти в середине области просмотра, просто сместив верхнюю и левую стороны на половину ширины оси или линии сетки:

И снова мы можем сделать код более поддерживаемым, используя переменные.

Сохранение соотношения сторон и покрытие размеров области просмотра

При создании HTML слайдов я всегда хотела, чтобы для каждого слайда существовал бы контейнер с определенным фиксированным соотношением сторон, который всегда покрывал бы, по крайней мере, одно из измерений области просмотра (ширину или высоту), и который, конечно, находился бы в середине, вдоль другой оси.

Илон Маск рекомендует:  Как создавать интерфейс программы

Давайте начнем, предположив, что нужное для слайдов соотношение сторон равно 4:3, и что мы используем широкоформатный монитор. Это означает, что слайды покрывают область просмотра по вертикали, а справа и слева еще есть место.

Пропорциональный контейнер: случай 1

Покрытие области просмотра по вертикали означает высоту 100vh . Зная высоту и соотношение сторон, мы можем получить ширину, которая равна 4/3*100vh . И чтобы получить контейнер в центре, мы должны сдвинуть его от левого края на половину ширины области ( 100vw/2 ) минус половина ширины слайда ( 4/3*100vh/2 ). Здесь мы должны использовать функцию calc() , так как смешиваем единицы измерения.

Теперь рассмотрим вариант, когда соотношение сторон области просмотра меньше, чем 4:3. В этом случае, слайды покрывают область просмотра по горизонтали с пустым местом сверху и снизу.

Пропорциональный контейнер: случай 2

Покрытие области просмотра по горизонтали означает ширину 100vw . Знание этого и соотношения сторон дает нам высоту, которая равна 3/4*100vw . И, наконец, смещение сверху равно половине высоты области просмотра минус половина высоты слайда, то есть 100vh/2 — 3/4*100vw/2 .

Мы, конечно, можем сделать код более гибким, не прописывая фиксированные пропорции и используя две переменных, а не одну (ширину или высоту). Вот Sass версия, которую вы также можете проверить, изменяя размер окна:

Даже лучше, мы могли бы превратить это миксин, который, как правило, лучше, чем практика использования глобальных переменных:

Обратите внимание, что $a и $b должны быть целыми числами, чтобы медиа запрос работал.

Это поддерживается во всех текущих версиях основных браузеров. Тем не менее, WebKit браузеры до недавнего времени не поддерживали единицы измерения области просмотра в функции calc() . Это было исправлено в Safari 8 и Chrome 34, соответственно, и в последней версии Opera.

Короткий заголовок слайда в центре

Мне хотелось еще пару вещей для слайд-презентаций.

Первое, слайды не должны полностью покрывать всю область просмотра, так как края могут получиться обрезанными. Это было легко исправить. Я просто установила им свойство box-sizing в значение border-box и установила для них границу.

Второе, обозначить разделы, каждый из которых начинается со слайда, на котором нет ничего, кроме короткого и незабываемого заголовка в середине.

Я не хотела использовать абсолютное позиционирование и поэтому решила установить подходящее значение line-height .

В случае, если высота слайда (вместе с границей) покрывает всю высоту области просмотра, необходимое мне значение line-height составляет 100vh минус удвоенное значение border-width слайда:

В случае, когда слайд вместе с границами покрывает область просмотра по горизонтали (и находится в центре по вертикали), его высота должна составлять $b/$a*100vw . Таким образом, значение line-height для заголовка будет равно значению высоты слайда минус удвоенное значение border-width :

Это было моей первой идеей, которая, в теории, должна была работать нормально. Всё так и есть в WebKit браузерах и IE. Тем не менее, оказывается, что значения calc() для line-height (и некоторых других свойств) не работают в Firefox, поэтому calc() здесь не самое лучшее решение. К счастью есть много других способов решить эту проблему (flexbox, абсолютное позиционирование и т.д.).

Вид с фиксированной точки

Еще одно, мне интересен CSS 3D и создание геометрических 3D фигур с помощью CSS, в частности. Если я создаю только одну фигуру, то обычно располагаю ее в центре сцены, в которой она находится. Сцена – это элемент, на котором я устанавливаю свойство perspective , а также родительский элемент элемента фигуры. У элемента фигуры есть свои собственные потомки, которые являются сторонами фигуры, но здесь мы не будем вдаваться в это подробно; если вы хотите узнать, как они позиционируются, то посмотрите мою гостевую статью на CSS-Tricks.

Установка perspective на сцену гарантирует, что мы будем видеть всё, что находится ближе в большем размере, и всё, что дальше в меньшем. Свойство perspective принимает значения длины, и чем меньше эти значения, тем больше разница между тем, что ближе к нам, и тем, что дальше.

Теперь предположим, что у нас есть очень простая 3D фигура, например, куб, прямо в центре нашей сцены. Это выглядит не совсем 3D: слишком симметрично, и если стороны полностью непрозрачны, то мы можем видеть только переднюю грань.

Мы могли бы повернуть его немного, скажем на 30°, вокруг своей оси y (т.е. вертикальной оси, проходящей через середину куба) или вокруг своей оси x. Это выглядит лучше, но мы можем видеть только две грани. Кроме того, куб теперь заметно повернут, а это не было целью.

Мы можем еще кое-что сделать, чтобы изменить нашу точку обзора. Сделаем это с помощью свойства perspective-origin . Его начальное значение 50% 50% относительно сцены. Мы знаем, что точка сцены 50% 50% – это центральная точка размещенной фигуры. Теперь предположим, что переместиться вверх и вправо. Простейший способ сделать это – установить свойство perspective-origin: 100% 0 . Но это создаст проблему: то, как теперь мы видим куб, зависит от размеров сцены (вы можете проверить это вживую изменяя размер области просмотра).

Изменение размеров сцены изменяет то, как мы видим куб

perspective-origin 100% 0 отсчитывается от верхнего правого угла сцены, в то время как куб всегда в центре сцены. Из-за этого, изменение размеров сцены изменит расстояние между точкой 50% 50% (где размещен куб) и точкой 100% 0 (где мы установили perspective-origin ).

Решение для этого – использование calc() для perspective-origin , чтобы просто добавить или вычесть фиксированное значение из первоначальных 50% :

Вы можете проверить это вживую, изменяя размеры области просмотра.

Создание счетчика с использованием ключевых кадров CSS

Можно ли создать анимированный счетчик, используя ключевые кадры, путем изменения содержимого элемента?

В качестве примера:

Если это невозможно, есть ли способ сделать это с помощью HTML/CSS без javascript?

Свойство content не обрабатывается с помощью @keyframes или transition , однако вы можете сделать это, используя псевдо-элемент с текстом 0 10 20 30 40 50 60 70 80 90 и анимируя его свойство margin-top .

Отвечая позже, есть идея использовать счетчик в этом случае:

Источником стилуса является

Я боюсь, что это невозможно, согласно w3c свойство content не является анимированным. Но вы можете сделать что-то вроде этого:

Возможно, это не лучшее решение, но это еще одно, Просто укажите задержку в четвертом параметре анимации каждого элемента

Посмотрите другие вопросы по меткам html css css3 counter css-animations или Задайте вопрос

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL