Hover.css — библиотека CSS3 с более чем 40 эффектами зависания
Когда вы пытаетесь привлечь внимание пользователей, у вас есть много способов добиться этого. В особых случаях при наведении курсора можно привлечь внимание к ссылке или кнопке. Обычно при наведении указатель мыши изменяет цвет элемента или состояние градиента, когда пользователи наводят на него курсоры. Но с большим количеством функций в CSS3 многие вещи могут быть настроены с помощью эффекта наведения мыши. Одним из них является применение анимации. И Hover.css может сделать это легко.
Hover.css является бесплатной библиотекой CSS для простого применения анимации с использованием эффекта наведения мыши. Вы можете применять при наведении мыши на действия, кнопки, логотипы, изображения и многое другое. Эта библиотека содержит более 40 эффектов на выбор, и они распределены по следующим категориям: 2D-преобразования, переходы границ, переходы теней и свечения, речевые пузыри и скручивания страниц.
Рекомендуемое чтение: как создать эффект отскока с помощью анимации CSS3
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Начало работы с Hover
Чтобы начать, вам нужно скачать Hover затем поместите файл hover.css в папку вашего проекта. Или, если вы предпочитаете, вы можете использовать hover-min.css, более компактную версию, которая меньше и быстрее загружается. Наконец, свяжите файл с вашей веб-страницей так:
..
..
Добавление наведения в элемент
Чтобы добавить крутой эффект наведения в ваш элемент, просто включите имя эффекта в класс элемента. Вы можете увидеть живую демонстрацию всех доступных эффектов в Hover целевая страница, Убедитесь, что используются только строчные буквы, и если между ними есть пробел, просто замените их тире.
Допустим, у меня есть следующая разметка ссылки:
При правильном оформлении ссылка выглядит так:
Ссылка изменилась и теперь выглядит как кнопка. Но когда я наведу на него курсор, кнопка не изменится и останется статичной. С помощью одного из эффектов Hover, Hover Shadow, я редактирую разметку и добавляю класс следующим образом:
Теперь у кнопки есть крутой эффект наведения, плавающий с тенью под ней, как в следующей демонстрации GIF.
Некоторые взломать и настройки
Если вы откроете hover.css в редакторе, вы обнаружите, что каждый эффект имеет некоторые свойства по умолчанию. Эти свойства дают элементу наиболее желаемый результат как для отображения, так и для внешнего вида. Ниже приведены свойства по умолчанию, и настройте их в соответствии с вашими потребностями:
- дисплей: необходим для работы эффекта.
- преобразование: используется для преобразований CSS3 для повышения производительности на мобильных устройствах и планшетах
- box-shadow: придает прозрачность тени, благодаря чему края преобразованных элементов CSS3 на мобильном телефоне / планшете выглядят более плавно
Последняя мысль
Hover — еще одна лучшая практика реализации CSS3. Но поскольку большинство эффектов, таких как переходы, преобразования и анимации, используют новые функции CSS3, вам нужно будет поработать над старыми браузерами, которые не поддерживают эти функции, чтобы убедиться, что резервный эффект наведения работает хорошо.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)