hover.css: библиотека анимаций для сайта
Hover.css является коллекцией различных CSS3 анимаций, которые можно применять к кнопкам, логотипам, абзацам и другим объектам сайта. Некоторые анимации пересекаются с содержащимися в библиотеке Animate.css, но в отличии от неё эффекты срабатывают не при загрузке страницы, а при наведении указателя мыши. Вы имеете возможность подключить библиотеку к сайту и использовать все эффекты, а можете скопировать только нужные в свой файл стилей. Для начала скачайте файл с сайта автора, на выбор есть полная версия и сжатая.
Для выбора отдельных эффектов, на сайте примеров подберите понравившийся эффект, скопируйте его название, затем откройте файл Hover.css в любом редакторе и с помощью поиска найдите название понравившегося эффекта. Скопировать необходимо все абзацы содержащие название понравившегося эффекта. Например для эффекта “pulse" скопируйте следующий код:
/* Pulse */
@-webkit-keyframes hvr-pulse {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
75% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
@keyframes hvr-pulse {
25% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
75% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
.hvr-pulse {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
-webkit-animation-name: hvr-pulse;
animation-name: hvr-pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}Вставьте его в вашу таблицу стилей. Затем, в HTML коде, к нужному элементу добавьте класс .hvr-pulse.
К примеру, применим данную анимацию к ссылке:
<a class="hvr-pulse">Текст вашей ссылки</a>
Если хотите совместить несколько эффектов, скопируйте весь необходимый код для выбранных анимаций и впишите класс через тире, например: pulse-grow.
В случае, если вы хотите использовать несколько или все стили, то подключите файл hover.css к вашему сайту.
- Скачайте hover.css или hover-min.css
- Добавьте его в ваш каталог с CSS файлами на сервере, например, http://ВАШ_САЙТ.COM/CSS/hover.css
- Подключите его между тегами <head> и </head>:
<link href="css/hover-min.css" rel="stylesheet">
После этого просто добавляйте выбранные классы к элементам, не смотря даже на уже существующие.
Например имеется кнопка:
<a class="button">Кнопка</a>
А теперь добавьте ей вращение:
<a class="button hvr-rotate">Кнопка</a>
Вот и всё, просто экспериментируйте и ваш сайт станет ещё красивее!
