Анимирование логотипа при наведении (проворот на 360°)

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

Разметка HTML:

<div class="blog-title">
  <a href="https://junnot.info" title="Junior Notation">
    <img alt="blog-logo" data-pagespeed-url-hash="2201169044" src="https://junnot.info/wp-content/uploads/2017/12/Var_22-e1513841733229.png.pagespeed.ce._LC9CXg9Ga.png">
  </a>
</div>

А теперь, CSS, который делает всю магию

.blog-title>a>img:hover {
    animation: titleimg 1.5s;
}

@keyframes titleimg {
  70% {
    transform: rotate(380deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Как видите, ничего сложного нет 🙂

 

See the Pen
Easy animation logo
by Denys Popov (@DenysPopov)
on CodePen.

Если у вас есть вопросы, или интересные темы для статьи, оставляйте свои комментарии 🙂

Так же подписывайтесь на наш телеграм-канал, чтобы всегда быть вкурсе новых статей 🙂

Оставьте ответ

comment-avatar

*