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

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

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

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

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

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

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

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


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


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

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

Делаем эффект параллакса для заднего фона на сайте

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

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

Эффект, затрудняющий прочтение текста

Август 1, 2018 г.

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

Читать

 

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

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



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

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

  1. Адриан:

    Спасибо!