Анимация уменьшения кнопки

Введение

В этом практическом занятии мы изучим, как создать анимацию уменьшения кнопки с использованием CSS. Целью этого практического занятия является помощь вам понять, как использовать псевдо-класс :hover и свойство transition для создания гладкой и визуально привлекательной анимации при наведении курсора мыши на кнопку. В конце этого практического занятия вы хорошо освоите методы создания простых, но эффективных анимаций с использованием CSS.

Анимация уменьшения кнопки

В ВМ уже предоставлены файлы index.html и style.css.

Чтобы создать анимацию уменьшения при наведении на элемент, вы можете использовать соответствующее свойство transition для анимирования изменений и псевдо-класс :hover для запуска анимации. Например, если вы хотите уменьшить кнопку с классом button - shrink при наведении на нее пользователя, вы можете добавить следующий CSS:

.button-shrink {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button-shrink:hover {
  transform: scale(0.8);
}

Это применит эффект перехода ко всем свойствам кнопки при изменении, и при наведении на нее пользователем кнопка уменьшится до 80% исходного размера. HTML-код для кнопки выглядит так:

<button class="button-shrink">Submit</button>

Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по анимации уменьшения кнопки. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.