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

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

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

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

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

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

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

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


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


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

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

Делаем треугольник на CSS с помощью border

Апрель 19, 2016 г.

Мы не будем углубляться в CSS3, где есть такое свойство как shape-outside, т.к. с его помощью легко можно сделать из обычного слоя любой многоугольник: ...

Читать

Эффект исчезновения/появления цветности CCS3

Апрель 7, 2017 г.

Среди простых, но эффектных способов оживить картинки на сайте есть следующий визуальный эффект, для которого нужны лишь CSS3 стили. Назовем его - "игра ...

Читать

 

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

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



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