Введение
В этом практическом занятии мы изучим, как создать анимацию уменьшения кнопки с использованием 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, чтобы улучшить свои навыки.