Hover
2.3.1
Коллекция эффектов наведения на основе CSS3, которые можно применять к ссылкам, кнопкам, логотипам, SVG, избранным изображениям и т. д. Легко применяйте к своим собственным элементам, изменяйте или просто используйте для вдохновения. Доступно в CSS, Sass и LESS.
Демо | Учебник
npm install hover.css --savebower install hover --saveHover.css можно использовать разными способами; либо скопируйте и вставьте эффект, который вы хотите использовать, в свою собственную таблицу стилей, либо укажите ссылку на таблицу стилей. Затем просто добавьте имя класса эффекта к элементу, к которому вы хотите его применить.
Если вы планируете использовать только один или несколько эффектов, лучше скопировать и вставить эффект в свою собственную таблицу стилей, чтобы пользователю не приходилось загружать css/hover.css целиком.
Предположим, вы хотите использовать эффект роста:
Скачать Hover.css
В css/hover.css найдите CSS Grow (каждый эффект назван с помощью комментария над ним):
/* Grow */
. hvr-grow {
display : inline-block;
vertical-align : middle;
transform : translateZ ( 0 );
box-shadow : 0 0 1 px rgba ( 0 , 0 , 0 , 0 );
backface-visibility : hidden;
-moz-osx-font-smoothing : grayscale;
transition-duration : 0.3 s ;
transition-property : transform;
}
. hvr-grow : hover ,
. hvr-grow : focus ,
. hvr-grow : active {
transform : scale ( 1.1 );
}Скопируйте этот эффект и затем вставьте его в свою таблицу стилей.
В HTML-файле, в котором вы хотите, чтобы появился эффект, добавьте класс .hvr-grow к выбранному вами элементу.
Пример элемента перед применением эффекта Hover.css:
< a href =" # " > Add to Basket a >Пример элемента после применения эффекта Hover.css:
< a href =" # " class =" hvr-grow " > Add to Basket a > Примечание . Начиная с 2.0.0 все имена классов Hover.css имеют префикс hvr- чтобы предотвратить конфликты с другими библиотеками/таблицами стилей. При использовании Sass/LESS это можно легко изменить с помощью переменной $nameSpace / @nameSpace в scss/_options.scss или less/_options.less .
Если вы планируете использовать множество эффектов Hover.css, возможно, вам захочется сослаться на всю таблицу стилей Hover.css.
hover-min.csshover-min.css в файлы вашего веб-сайта, например, в каталог с именем csshover-min.css в < head >
< link href =" css/hover-min.css " rel =" stylesheet " >
head >В качестве альтернативы вы можете добавить ссылку в существующую таблицу стилей следующим образом (это может быть полезно для пользователей WordPress, которые не могут редактировать HTML):
@import url ( "hover-min.css" );.hvr-grow к выбранному вами элементу.Пример элемента перед применением эффекта Hover.css:
< a href =" # " class =" button " > Add to Basket a >Пример элемента после применения эффекта Hover.css:
< a href =" # " class =" button hvr-grow " > Add to Basket a >displayЧтобы сделать элемент «трансформируемым», Hover.css присваивает всем элементам, к которым он применяется, следующее:
display : inline-block;
vertical-align : middle; Если вы хотите переопределить это поведение, либо удалите приведенный выше CSS из Hover.css, либо измените свойство display для элемента. Обязательно объявите переопределение после объявлений Hover.css, чтобы каскад CSS вступил в силу. В качестве альтернативы, если вы используете версию Hover.css для Sass/LESS, вы можете удалить/закомментировать миксин forceBlockLevel() найденный в scss/_hacks.scss или less/_hacks.less .
Дополнительную информацию о трансформируемых элементах см. в модуле «Преобразования CSS».
Чтобы добавить значок Hover.css, поместите HTML-код значка внутри элемента, к которому применяется эффект Hover.css. Например:
В приведенном выше коде мы присвоили элементу ссылки класс hvr-icon-forward , который заставит значок перемещаться вперед при наведении курсора на ссылку. Самому значку присваивается класс hvr-icon , чтобы Hover.css знал, что это именно тот значок, который мы хотим анимировать. В этом примере наш значок взят из FontAwesome, который мы загрузили в нашей веб-страницы в соответствии с инструкциями FontAwesome, например:
< link href =" //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css " rel =" stylesheet " media =" all " >Примечание. Начиная с Hover.css версии 2.3.0, вы можете использовать любой метод добавления значков (ранее по умолчанию поддерживался только FontAwesome). Например, вы можете использовать другую библиотеку значков или вместо этого использовать изображение такое:
Здесь изображение будет действовать как значок, поскольку к нему применен класс hvr-icon , а при наведении на него значок будет вращаться, как определено классом hvr-icon-spin родительского элемента.
Положение значка полностью находится под вашим контролем. Вы можете поместить его перед текстом, например:
Или используйте собственный CSS, чтобы расположить значок так, как вы считаете нужным.
Проект состоит из следующих папок и файлов:
Другие примечательные файлы включают в себя:
Многие эффекты Hover.css основаны на функциях CSS3, таких как переходы, анимация, преобразования и псевдоэлементы, поэтому эффекты могут не полностью работать в старых браузерах.
Помимо вышеупомянутых браузеров, Hover.css поддерживается всеми основными браузерами. Посетите сайт caniuse.com для получения полной поддержки многих веб-технологий и соответствующим образом протестируйте свои веб-страницы. Рекомендуется применять резервные эффекты для старых браузеров, используя CSS, поддерживаемый этими браузерами, или библиотеку тестирования функций, например Modernizr.
Grunt не является обязательным, но может ускорить разработку. Установив Grunt, запустите grunt из командной строки, чтобы настроить сервер разработки, доступный по адресу http://127.0.0.1:8000/, или ваш локальный IP-адрес для сетевого тестирования. При запуске Grunt Sass или LESS будут предварительно обработаны (в зависимости от того, работаете ли вы с папкой scss или less ), а файлы CSS будут минимизированы.
Примечание. Первоначально в Grunt было настроено автоматическое префиксирование свойств CSS, но для того, чтобы сделать проект максимально доступным, это больше не так. Вместо этого для префикса браузера следует использовать миксин prefixed(property, value) Sass/LESS. См. Использование Sass/LESS для разработки и [Использование LESS для разработки].
Sass/LESS не являются обязательными, но могут ускорить разработку. Предварительно обработайте Sass/LESS с помощью вашего любимого программного обеспечения или среды, предоставленной через Grunt.
Sass/LESS используется в проекте Hover.css для разделения различных CSS на определенные файлы. Каждый эффект находится в отдельном файле в каталоге effects . Hover.css также использует следующие файлы .scss и .less :
Содержит хаки (нежелательные, но обычно необходимые строки кода), применяемые к определенным эффектам. Хаки объяснили здесь.
Содержит миксины prefixed и keyframes , которые применяют необходимые префиксы, указанные вами в _options.scss / _options.less к свойствам и ключевым кадрам.
Свойства могут иметь такой префикс:
@include prefixed(transition-duration , .3s);. prefixed ( transition-duration , .3 s ); Миксину prefixed передается свойство, которое вы хотите префиксить, а затем его значение.
Ключевые кадры могут иметь следующий префикс:
@include keyframes(my-animation) {
to {
color : red;
}
} Миксину keyframes передается имя ключевого кадра, за которым следует содержимое с помощью директивы @content.
. keyframes ( my-animation , {
to {
color : red;
}
}); Миксину keyframes передается имя ключевого кадра, за которым следует содержимое, оба в качестве аргументов.
Содержит параметры по умолчанию, различные параметры эффектов и префиксы браузера, которые вы хотите использовать с prefixed миксином. По умолчанию только префикс -webkit- имеет значение true (поскольку большинство браузеров сейчас не требуют префиксов).
Начиная с 2.0.0 , _options также включает опцию $nameSpace / @nameSpace , которая позволяет вам изменить имя, с которым начинаются все классы. Пространство имен по умолчанию — hvr .
Для параметра $includeClasses / @includeClasses по умолчанию установлено значение true , и все эффекты Hover.css будут генерироваться под собственными именами классов, например, hvr-grow . Если вы хотите добавить свойства, составляющие эффекты Hover.css, к именам ваших собственных классов, установите для этой опции значение false .
Если вы хотите добавить свои собственные эффекты, ознакомьтесь с Руководством для участников.
Hover.css доступен по бесплатной личной лицензии/с открытым исходным кодом или платной коммерческой лицензии в зависимости от ваших требований. Чтобы сравнить лицензии, посетите магазин Ian Lunn Design Limited Store и приобретите коммерческую лицензию здесь.
Для личного использования или использования с открытым исходным кодом Hover.css предоставляется по лицензии MIT.
Читать полную лицензию
Для коммерческого использования Hover.css доступен по коммерческой, расширенной коммерческой и OEM-коммерческой лицензиям.
Покупка | Читать полную лицензию
*За исключением приложений, которые позволяют конечным пользователям создавать отдельные приложения. См. коммерческую лицензию OEM.
Покупка | Читать полную лицензию
Если ваше приложение позволяет конечным пользователям создавать отдельные приложения, включающие программное обеспечение Ian Lunn Design Limited, например, набор инструментов разработки, библиотеку или сборщик приложений, вы должны получить коммерческую лицензию OEM. Пожалуйста, свяжитесь с нами для получения дополнительной информации о коммерческой лицензии OEM.
Hover.css ранее был доступен по лицензии MIT как для коммерческого, так и для некоммерческого использования. Любой, кто получил лицензию MIT для коммерческого использования до версии 2.2.0 (24 марта 2017 г.), может продолжать использовать версии Hover.css до версии 2.2.0 под той же лицензией.
Если вы хотите обновиться до версии 2.2.0 или выше или просто хотите продемонстрировать свою поддержку Hover.css (мы будем очень признательны!), приобретите актуальную коммерческую лицензию. Приобретите коммерческую лицензию.
Ян Ланн — внештатный фронтенд-разработчик и автор книги «Основы CSS3».
Наймите Яна для создания адаптивных веб-сайтов, веб-сайтов WordPress, JavaScript, анимации и оптимизации.
