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

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

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

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

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

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

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

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

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

Стили:

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

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

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

Вариации

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

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

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

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

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

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

Плавное появление элемента при загрузке

Апрель 21, 2025 г.

Здесь мы разберем CSS анимацию - плавное проявление элемента. Это статья из цикла заметок по CSS анимации и эффектам. Это одна из самых простых и универсальных анимаций. Она используется, чтобы элементы мягко появлялись на экране, создавая ...

Читать

CSS-анимация: Эффект пульсации

Май 1, 2025 г.

Пульсация — это визуальный эффект, при котором элемент плавно увеличивается и уменьшается, имитируя дыхание или сердцебиение. Этот эффект привлекает внимание, но остаётся достаточно мягким, чтобы не раздражать пользователя. Это статья из цикла заметок ...

Читать

Изменение цвета кнопки при наведении

Апрель 21, 2025 г.

Здесь мы разберем CSS анимацию - изменение цвета при наведении (:hover). Это статья из цикла заметок по CSS анимации и эффектам. Одним из самых простых и эффективных способов оживить интерфейс — сделать так, чтобы кнопка меняла цвет, когда ...

Читать
 

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

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



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