Медленное вращение — добавим динамики логотипу

Небольшая анимация — отличный способ добавить интерактивности и «отзывчивости» вашему интерфейсу. Один из простейших и эффектных способов «оживить» сайт — это плавное вращение элемента. Чаще всего такой приём используют для логотипа, иконки загрузки или фонового декора. Анимация создаёт ощущение движения, особенно если применяется ненавязчиво.

Это статья из цикла заметок по CSS анимации и эффектам.

Что мы хотим получить

Логотип (или другой элемент) медленно и непрерывно вращается по часовой стрелке. Это может быть постоянное движение или запуск по событию (например, при наведении).

Анимация основана на двух вещах:

  • Свойства transform: rotate — поворачивают элемент.
  • @keyframes b animation — позволяют делать это плавно.

Пример того, как это выглядит:

Вот пример на чистом CSS / HTML

Стили:

Когда использовать

  • Для иконок загрузки или фона
  • На лендингах — чтобы логотип «жил»
  • В декоративных элементах интерфейса

Не злоупотребляйте: постоянное вращение может отвлекать пользователя, особенно если элемент крупный или находится в центре внимания. Лучше использовать такие эффекты дозированно.

Вариации

Вращение только при наведении

— в этом случае нет @keyframes, просто задаётся эффект вращения при hover.

Обратное вращение

— вращение против часовой стрелки.

Мало букафф? Читайте есчо !

Поворот иконки при наведении

Апрель 22, 2025 г.

Небольшая анимация при наведении — отличный способ добавить интерактивности и "отзывчивости" вашему интерфейсу. Один из самых простых и эффектных вариантов — поворот иконки. Это статья из цикла заметок по CSS анимации и эффектам. Где это типично ...

Читать

Анимация нажатия: эффект нажатой кнопки

Май 2, 2025 г.

Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка "прижать" её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY). Это статья из цикла заметок по ...

Читать

Анимация подчеркивания текста при наведении

Апрель 28, 2025 г.

Классический эффект: при наведении на ссылку или текст появляется анимированное подчеркивание. Вместо обычного text-decoration: underline, подчеркивание создаётся с помощью псевдоэлементов (::after или ::before) и плавно анимируется. Это выглядит современно ...

Читать

Эффект бегущей строки на CSS

Апрель 24, 2025 г.

Бегущая строка — это классический визуальный элемент, в котором текст непрерывно движется по экрану. В старом HTML для этого использовался тег <marquee>, но он устарел. Вместо него сейчас можно сделать более гибкую и красивую реализацию на CSS. ...

Читать
 

Комментарии к «Медленное вращение — добавим динамики логотипу»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: