Как сделать анимацию при наведении курсора css

Чтобы сделать анимацию при наведении курсора на элемент в CSS, нужно использовать псевдокласс :hover и свойство transition.

Давайте рассмотрим пример анимации при наведении курсора на кнопку:

button {
  background-color: #1abc9c;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: #16a085;
}

Здесь мы сначала определили стили для кнопки. Затем мы использовали псевдокласс :hover для создания эффекта анимации при наведении курсора на кнопку. С помощью свойства transition мы определили, какое свойство кнопки (в данном случае, это свойство background-color) должно изменяться в течение 0.5 секунды с плавным вхождением и выходом из эффекта.

В блоке, указанном после псевдокласса :hover, мы изменили свойство background-color на более темное значение, чтобы сделать эффект наведения более заметным.

Таким образом, при наведении курсора на кнопку, цвет фона будет изменяться с помощью анимации в течение 0.5 секунды. Это только пример, и вы можете изменять любые свойства для создания анимаций при наведении курсора на элемент.

реклама

Качественный хостинг сайтов

реклама

Получите консультацию нашего маркетолога

Изучит ваш проект, подберет подходящие услуги и тарифы

Получите бесплатный аудит

Наш специалист сделает базовый аудит вашего проекта и предложит персональные предложения.

Закажите услугу Как сделать анимацию при наведении курсора css

Наш специалист свяжется с вами в ближайшее время и уточнит детали