Создание интерактивных элементов с переходами: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

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

Список тем

Плавное изменение фона при наведении

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

CSS

.interactive-box {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  /* Добавьте свойство transition для плавного изменения фона */
  input1: background-color 0.3s;
}

.interactive-box:input2 {
  background-color: lightcoral;
}

                     .interactive-box {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  /* Добавьте свойство transition для плавного изменения фона */
  input1: background-color 0.3s;
}

.interactive-box:input2 {
  background-color: lightcoral;
}

HTML

<div class="interactive-box"></div>

Используйте псевдокласс `:hover` для задания стилей при наведении. Чтобы сделать изменение цвета плавным, добавьте свойство `transition` к основному селектору блока. Укажите в нем анимируемое свойство (`background-color`) и длительность перехода (`0.3s`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Переход для конкретного свойства

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

CSS

.styled-button {
  padding: 15px 25px;
  border: none;
  background-color: darkcyan;
  color: white;
  cursor: pointer;
  /* Укажите, какое свойство должно анимироваться */
  input1: color;
  /* Задайте длительность перехода */
  input2: 0.5s;
}

.styled-button:hover {
  background-color: teal;
  color: yellow;
}

                     .styled-button {
  padding: 15px 25px;
  border: none;
  background-color: darkcyan;
  color: white;
  cursor: pointer;
  /* Укажите, какое свойство должно анимироваться */
  input1: color;
  /* Задайте длительность перехода */
  input2: 0.5s;
}

.styled-button:hover {
  background-color: teal;
  color: yellow;
}

HTML

<button class="styled-button">Наведи на меня</button>

Используйте свойство `transition-property`, чтобы указать, к какому именно свойству применять переход (в данном случае `color`). Затем задайте длительность с помощью `transition-duration`. Для мгновенного изменения фона не указывайте `background-color` в `transition-property`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование временной функции

Заставьте блок плавно увеличиваться при наведении с использованием временной функции `ease-in-out`. Переход должен длиться 0.4 секунды.

CSS

.scale-box {
  width: 80px;
  height: 80px;
  background-color: mediumpurple;
  margin: 20px;
  /* Добавьте переход для свойства transform */
  input1: transform 0.4s input2;
}

.scale-box:hover {
  transform: scale(1.2);
}

                     .scale-box {
  width: 80px;
  height: 80px;
  background-color: mediumpurple;
  margin: 20px;
  /* Добавьте переход для свойства transform */
  input1: transform 0.4s input2;
}

.scale-box:hover {
  transform: scale(1.2);
}

HTML

<div class="scale-box"></div>

Добавьте свойство `transition` к блоку. Укажите анимируемое свойство (`transform`), длительность (`0.4s`) и временную функцию (`ease-in-out`). Для увеличения используйте `transform: scale(1.2);` в состоянии `:hover`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Добавление задержки перед переходом

Настройте кнопку так, чтобы изменение цвета фона при наведении начиналось с задержкой в 1 секунду. Сам переход должен длиться 0.3 секунды.

CSS

.delayed-button {
  padding: 15px 25px;
  border: none;
  background-color: tomato;
  color: white;
  cursor: pointer;
  transition-property: background-color;
  transition-duration: 0.3s;
  /* Добавьте задержку перед началом перехода */
  input1: 1s;
}

.delayed-button:input2 {
  background-color: gold;
}

                     .delayed-button {
  padding: 15px 25px;
  border: none;
  background-color: tomato;
  color: white;
  cursor: pointer;
  transition-property: background-color;
  transition-duration: 0.3s;
  /* Добавьте задержку перед началом перехода */
  input1: 1s;
}

.delayed-button:input2 {
  background-color: gold;
}

HTML

<button class="delayed-button">Наведи и подожди</button>

Используйте свойство `transition-delay`, чтобы установить задержку перед началом перехода. Также не забудьте указать анимируемое свойство (`background-color`) и длительность (`transition-duration`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Переход для нескольких свойств одновременно

Создайте эффект для блока, при котором одновременно плавно меняются его ширина и цвет фона при наведении. Переход для ширины должен длиться 0.5с, а для фона - 0.8с.

CSS

.multi-transition-box {
  width: 100px;
  height: 100px;
  background-color: cornflowerblue;
  /* Настройте переходы для width и background-color */
  input1: width 0.5s, input2 0.8s;
}

.multi-transition-box:hover {
  width: 150px;
  background-color: lightgreen;
}

                     .multi-transition-box {
  width: 100px;
  height: 100px;
  background-color: cornflowerblue;
  /* Настройте переходы для width и background-color */
  input1: width 0.5s, input2 0.8s;
}

.multi-transition-box:hover {
  width: 150px;
  background-color: lightgreen;
}

HTML

<div class="multi-transition-box"></div>

В свойстве `transition` можно перечислить несколько переходов через запятую. Для каждого перехода укажите анимируемое свойство и его длительность. Например: `transition: width 0.5s, background-color 0.8s;`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование shorthand свойства transition

Используя краткую запись свойства `transition`, настройте плавное изменение прозрачности изображения при наведении. Переход должен длиться 0.4 секунды, использовать временную функцию `linear` и иметь задержку 0.1 секунды.

CSS

.image-fade {
  width: 150px;
  display: block;
  opacity: 1;
  /* Используйте shorthand свойство transition */
  /* Укажите свойство, длительность, функцию и задержку */
  input1: opacity 0.4s input2 0.1s;
}

.image-fade:hover {
  opacity: 0.5;
}

                     .image-fade {
  width: 150px;
  display: block;
  opacity: 1;
  /* Используйте shorthand свойство transition */
  /* Укажите свойство, длительность, функцию и задержку */
  input1: opacity 0.4s input2 0.1s;
}

.image-fade:hover {
  opacity: 0.5;
}

HTML

<img src="https://naytikurs.ru/img/7.png" alt="Example Image" class="image-fade">

Краткая запись `transition` позволяет указать все параметры в одном свойстве: `transition: [property] [duration] [timing-function] [delay];`. Порядок важен, но `duration` должен идти перед `delay`. Если `property` не указан, переход применяется ко всем анимируемым свойствам.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Переход при получении фокуса

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

CSS

input.focusable-input {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 0px rgba(0, 123, 255, 0);
  /* Добавьте плавный переход для всех свойств */
  input1: all 0.2s ease-out;
}

input.focusable-input:input2 {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  outline: none; /* Убираем стандартную обводку браузера */
}

                     input.focusable-input {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 0px rgba(0, 123, 255, 0);
  /* Добавьте плавный переход для всех свойств */
  input1: all 0.2s ease-out;
}

input.focusable-input:input2 {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  outline: none; /* Убираем стандартную обводку браузера */
}

HTML

<input type="text" class="focusable-input" placeholder="Кликни сюда">

Используйте псевдокласс `:focus` для стилизации элемента при получении фокуса. Примените свойство `transition` к основному селектору поля ввода, указав длительность `0.2s`. Не указывайте конкретное свойство в `transition`, чтобы переход применялся ко всем изменениям (`border-color` и `box-shadow`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку