[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
hover.css: анимация для ваших кнопок
Neo Дата: Понедельник, 17.02.2014, 15:06 | Сообщение 1


Коллекция различных видов 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>

Статус: Neo
  • Страница 1 из 1
  • 1
Поиск: