Будни разработчика

This media is not supported in your browser

VIEW IN TELEGRAM

#фишка дня от Jhey

Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.

Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!

Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:

button:hover span:after {
  animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
  20% { content: '_'; }
  40% { content: var(--c1); }
  60% { content: var(--c2); }
}

Вуаля, вы великолепны!

Естественно, символы надо определить заранее:

  <span
    style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
  >C</span>

The Matrix has you.

А, ну и ссылочка на кодпен: https://codepen.io/jh3y/pen/GRLKMPY

#css #var #flip #бородач

❤15👍12🤡1

www.tgoop.com/htmlshit/3683

3.3K viewsSergey Bekharsky, edited  Jul 3 at 08:03

#фишка дня от Jhey

Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.

Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!

Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:

button:hover span:after {
  animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
  20% { content: '_'; }
  40% { content: var(--c1); }
  60% { content: var(--c2); }
}

  <span
    style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
  >C</span>

BY Будни разработчика