• Теория
  • Теория

Радиокнопки, шаг 3

Теперь оживим радиокнопки.

Для начала уменьшим закрывающий псевдоэлемент label::after или «закрывашку» до нулевого размера с помощью трансформации scale.

А в активном состоянии будем увеличивать «закрывашку» до нужного размера. Для управления активным состоянием «закрывашки» используем CSS-правило с таким селектором:

input[type="radio"]:checked ~ label::after { ... }

Свойства плавного перехода, как и в предыдущих примерах, добавим в CSS-правило для исходного состояния:

label::after { ... }
Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Плавные переходы» тренажёра «Интерфейсные анимации» можно после регистрации и оформления подписки.