logo

Коллекция Hover.css

Hover.css это коллекция CSS3 эффектов, которые можно использовать для анимации при наведении на них курсора. Содержит более 100 эффектов: 2D-трансформации, тени, границы, использование библиотеки иконок.
Пользоваться данной коллекцией очень просто: скачиваем архив ZIP, в папке css находим файл hover.css и загружаем его на сайт. Лучше конечно воспользоваться его минимизированной копией hover-min.css

Прописываем реальный путь к файлу


    <link rel="stylesheet" href="../hover-min.css">

Теперь достаточно необходимому тегу прописать выбранный класс.


<a href="#" class="button hvr-grow">grow</a>
<a href="#" class="button hvr-shrink">shrink</a>
<a href="#" class="button hvr-pulse">pulse</a>
<a href="#" class="button hvr-pulse-grow">pulse-grow</a>
........

Для того, чтобы названия классов не совпали с уже возможно примененными на сайте, к ним добавлен префикс hvr-…. Конечно, если вам необходимы всего несколько эффектов, всю библиотеку использовать не стоит. Достаточно воспользоваться стилями для выбранного класса.


 /*  Внешний вид кнопки  */
.button {
   display: inline-block;
   margin: 1.25em;
   padding: 1em;
   width: 25%;
   background: #f4db90;
   background: linear-gradient(135deg,  #f4db90 0%,#ea8407 95%);
   font-weight: 700;
   text-align: center;
}
/*  Для примера стили одного из классов библиотеки hover.css  */
.hvr-grow {
   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;
   -webkit-transition-duration: .3s;
   transition-duration: .3s;
   -webkit-transition-property: -webkit-transform;
   transition-property: transform
}
.hvr-grow:active,
.hvr-grow:focus,
.hvr-grow:hover {
   -webkit-transform: scale(1.1);
   -ms-transform: scale(1.1);
   transform: scale(1.1)
}

При необходимости, изменяя тот или другой параметр, «подгоняем» стили по себя.

Эффекты для некоторых классов приведены ниже.

2D-Трансформация

Тени

Трансформация границ

Загибаем углы

Иконки

Небольшое дополнение. Познакомимся с библиотекой иконок. Скачивать ничего не будем, просто подключим библиотеку.


<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

И как и выше, просто прописываем тегу новый класс.


<a href="#" class="button hvr-icon-pulse-shrink">icon-pulse-shrink</a>
<a href="#" class="button hvr-icon-bounce">icon-bounce</a>
<a href="#" class="button hvr-icon-hang ">icon-hang</a>

Вид иконки, класс, соответствующий этой иконке и код иконки смотрим на сайте. Ниже приводиться часть таблицы стилей для одного из классов. При необходимости можно заменить код иконки и ее положение.


.hvr-icon-buzz:before {
   content: "\f017";   /* Код иконки */
   position: absolute;
   right: 1em;          /* положение иконки */
   padding: 0 1px;
   font-family: FontAwesome;
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
}
.hvr-icon-buzz:active:before,
.hvr-icon-buzz:focus:before,
.hvr-icon-buzz:hover:before {
   -webkit-animation-name: hvr-icon-buzz;
   animation-name: hvr-icon-buzz;
   -webkit-animation-duration: .15s;
   animation-duration: .15s;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
    /* Анимация */
}@-webkit-keyframes hvr-icon-buzz {
   50% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg)
   }
   100% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg)
   }
}
@keyframes hvr-icon-buzz {
   50% {
      -webkit-transform: translateX(3px) rotate(2deg);
      transform: translateX(3px) rotate(2deg)
   }
   100% {
      -webkit-transform: translateX(-3px) rotate(-2deg);
      transform: translateX(-3px) rotate(-2deg)
   }
}
.hvr-icon-buzz {
   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;
   position: relative;
   padding-right: 2.2em;
   -webkit-transition-duration: .3s;
   transition-duration: .3s;
}

А вот так это выглядит:


Практические примеры 0

Рекомендую прочитать...

Трансформация «Дверной глазок»
трансформация Дверной глазок

Приподнимаем заслонку дверного глазка наводя курсор, а под ней находится ссылка на скачивание. Код каждого из представленных ниже глазков одинаков. Разница состоит в том, что для каждого из вариантов используются различные фоновые изображения и значения некоторых свойств. Различия выделены соответственно разными цветами.

Читать полностью
Как изменить цвет изображения
как изменить цвет изображения

Как! Во многих интернет магазинах присутствует такая штука: цвет товара меняет свой цвет. Т.е. при клике на один из представленных цветов товар, как правило, это одежда, автомашина, чехлы для телефона или сам телефон меняет свою цветовую окраску. Со стороны кажется, что товар как бы заливается выбранным цветом, или приобретает тот орнамент ( часто представлены при […]

Читать полностью
Трансформации для блока анонсов
блок анонсов

В этой статье представлены несколько различных трансформаций, которые удобно применить ,например, для анонсирования своей продукции или услуг. Неплохо эти варианты будут смотреться и в рекламных блоках. Вариант, представленный ниже, возможно применить в интернет-магазине. Первоначально выводится изображение товара, при наведении курсора появляется краткая информация или параметры.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.