Как сделать анимацию иконки?

Есть иконки в двух цветах, нужно чтобы при наведении цвет плавно менялся с серого на синий. Как это реализовать?
  • Вопрос задан
  • 777 просмотров
Решения вопроса 1
Yadalay
@Yadalay
Php, Mysql, Html, Css, Js/Jquery/Ajax, Laravel
Html:
<div class="block">Текст</div>
Css:
.block {
   background: gray;
   color: #FFF;
   cursor: pointer;
   transition: 3s;
}

.block:hover {
   background: blue;
}

Цвета и прочие стили уже сами сделаете под себя. Ключевое свойство здесь - transition. И его значение можете поменять.

UPD: А для svg изображений/иконок вот такой код:
svg {
  fill: gray;
  transition: fill 2s ease;
}

svg:hover {
  fill: blue;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы