Hover.css – библиотека CSS3 с более чем 40 эффектами зависания

Когда вы пытаетесь привлечь внимание пользователей, у вас есть много способов добиться этого. В особых случаях при наведении курсора можно привлечь внимание к ссылке или кнопке. Обычно при наведении указатель мыши изменяет цвет элемента или состояние градиента, когда пользователи наводят на него курсоры. Но с большим количеством функций в CSS3 многие вещи могут быть настроены с помощью эффекта наведения мыши. Одним из них является применение анимации. И Hover.css может сделать это легко.

Hover.css является бесплатной библиотекой CSS для простого применения анимации с использованием эффекта наведения мыши. Вы можете применять при наведении мыши на действия, кнопки, логотипы, изображения и многое другое. Эта библиотека содержит более 40 эффектов на выбор, и они распределены по следующим категориям: 2D-преобразования, переходы границ, переходы теней и свечения, речевые пузыри и скручивания страниц.

Рекомендуемое чтение: как создать эффект отскока с помощью анимации CSS3

Начало работы с Hover
Чтобы начать, вам нужно скачать Hover затем поместите файл hover.css в папку вашего проекта. Или, если вы предпочитаете, вы можете использовать hover-min.css, более компактную версию, которая меньше и быстрее загружается. Наконец, свяжите файл с вашей веб-страницей так:

.. ..

Добавление наведения в элемент
Чтобы добавить крутой эффект наведения в ваш элемент, просто включите имя эффекта в класс элемента. Вы можете увидеть живую демонстрацию всех доступных эффектов в Hover целевая страница, Убедитесь, что используются только строчные буквы, и если между ними есть пробел, просто замените их тире.

Допустим, у меня есть следующая разметка ссылки:

РАЗМЕСТИТЬ

При правильном оформлении ссылка выглядит так:

Ссылка изменилась и теперь выглядит как кнопка. Но когда я наведу на него курсор, кнопка не изменится и останется статичной. С помощью одного из эффектов Hover, Hover Shadow, я редактирую разметку и добавляю класс следующим образом:

РАЗМЕСТИТЬ

Теперь у кнопки есть крутой эффект наведения, плавающий с тенью под ней, как в следующей демонстрации GIF.

Некоторые взломать и настройки
Если вы откроете hover.css в редакторе, вы обнаружите, что каждый эффект имеет некоторые свойства по умолчанию. Эти свойства дают элементу наиболее желаемый результат как для отображения, так и для внешнего вида. Ниже приведены свойства по умолчанию, и настройте их в соответствии с вашими потребностями:

• дисплей: необходим для работы эффекта.
• преобразование: используется для преобразований CSS3 для повышения производительности на мобильных устройствах и планшетах
• box-shadow: придает прозрачность тени, благодаря чему края преобразованных элементов CSS3 на мобильном телефоне / планшете выглядят более плавно

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