Site icon Vavik96

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 к вашему сайту.

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

После этого просто добавляйте выбранные классы к элементам, не смотря даже на уже существующие.




Например имеется кнопка:

<a class="button">Кнопка</a>

А теперь добавьте ей вращение:

<a class="button hvr-rotate">Кнопка</a>

Вот и всё, просто экспериментируйте и ваш сайт станет ещё красивее!

Exit mobile version