Коллекция различных видов CSS3 анимации, которые можно применит к кнопкам, логотипам и другим объектам.
Подключение отдельного стиля
Если вы планируете пользоваться только одним эффектом, то лучше скопировать себе его стили, чтобы пользователь не грузил весь файл hover.css.
К примеру, мы хотим эффект Grow:
Качаем hover.css
В файле hover.css, находим стиль для анимации типа 'Grow' (комментарии в помощь):
Код
/* Grow */
.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
Копируем эффект к себе в таблицу стилей.
В HTML коде, нужному элементу выставляем класс .grow.
К примеру, применим данную анимацию к ссылке:1
Код
<a class="button">Add to Basket</a>
Добавляем нужный класс:1
Код
<a class="button grow">Add to Basket</a>
Подключение всех стилей
Если вы планируете пользоваться всеми стилями, то подключите весь файл hover.css.
Скачайте hover-min.css
Добавьте файл hover-min.css в ваш рабочий каталог с css файлами
Подключите hover-min.css в <head>:
Код
<head>
<link href="css/hover-min.css" rel="stylesheet">
</head>
Выберите эффект и примените его для нужного объекта.
К примеру, к той же кнопке:
Код
<a class="button">Add to Basket</a>
Добавляем нужный класс:1
Код
<a class="button grow">Add to Basket</a>
