Эффект тряски элемента на сайте при наведении с помощью CCS3

В последнее время как то кучно пошло у меня использование CCS3 анимации. Продолжаю делиться шаблонами. Сегодня рассмотрим анимацию, которая, запускаясь при наведении, имитирует дрожание элемента. Её можно подключать и в других случаях (не только при наведении). Например, с помощью подключения класса (css), который описывает эффект, или установить как анимацию HTML элемента по умолчанию. Всё в ваших руках, я покажу лишь пример.

Анимация будет выглядеть как потряхивание элемента, которое вызывается поочередным поворотом контейнера то по часовой, то против часовой стрелки на небольшой угол. Если браузер поддерживает CCS3, то стили сведутся к примерно вот такому коду:

При наведении мышки, элемент начинает периодически «трястись». Я установил бесконечный цикл анимации с циклом 1.2 секунды. Поворот элемента выполняется всего на 10 градусов поочередно в ту или иную сторону.

Если будете тестировать, то задайте хотя бы цвет фона для элемента, а то его не будет видно :). Я думаю, вы об этом догадаетесь.

Современные браузеры все поддерживают CCS3. Приведу тем не менее вариант, учитывающий некоторые старые версии браузеров.

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

Вот более полный пример.


Введите Ваш номер телефона


Написать комментарий

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

Zoom-эффект на CSS3

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

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

Читать

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

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

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

Читать

 

Комментарии к «Эффект тряски элемента на сайте при наведении с помощью CCS3»

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



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