ЭФФЕКТ ТРЯСКИ ИЗОБРАЖЕНИЯ ПРИ НАВЕДЕНИИ

08.07.2016 592 0 Turbo Все для uCoz Скрипты для uCoz

ЭФФЕКТ ТРЯСКИ ИЗОБРАЖЕНИЯ ПРИ НАВЕДЕНИИ-придаст вашему сайту уникальности и функциональности.При наведении курсором на изображения она слегка встряхнется и окончательно застынет,только повторный раз заставит ее очнуться и затрястись,как бы пробуждаясь от глубокого и сладкого сна

Установка:Код вставки

Код

В CSS

Код

.buzz-out {
  display:inline-block;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  box-shadow:0 0 1px rgba(0,0,0,0)
}
.buzz-out:hover,.buzz-out:focus,.buzz-out:active {
  -webkit-animation-name:buzz-out;
  animation-name:buzz-out;
  -webkit-animation-duration:0.75s;
  animation-duration:0.75s;
  -webkit-animation-timing-function:linear;
  animation-timing-function:linear;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1
}
@keyframes buzz-out {
  10% {
  -webkit-transform:translateX(3px) rotate(2deg);
  transform:translateX(3px) rotate(2deg)
  }
  20% {
  -webkit-transform:translateX(-3px) rotate(-2deg);
  transform:translateX(-3px) rotate(-2deg)
  }
  30% {
  -webkit-transform:translateX(3px) rotate(2deg);
  transform:translateX(3px) rotate(2deg)
  }
  40% {
  -webkit-transform:translateX(-3px) rotate(-2deg);
  transform:translateX(-3px) rotate(-2deg)
  }
  50% {
  -webkit-transform:translateX(2px) rotate(1deg);
  transform:translateX(2px) rotate(1deg)
  }
  60% {
  -webkit-transform:translateX(-2px) rotate(-1deg);
  transform:translateX(-2px) rotate(-1deg)
  }
  70% {
  -webkit-transform:translateX(2px) rotate(1deg);
  transform:translateX(2px) rotate(1deg)
  }
  80% {
  -webkit-transform:translateX(-2px) rotate(-1deg);
  transform:translateX(-2px) rotate(-1deg)
  }
  90% {
  -webkit-transform:translateX(1px) rotate(0);
  transform:translateX(1px) rotate(0)
  }
  100% {
  -webkit-transform:translateX(-1px) rotate(0);
  transform:translateX(-1px) rotate(0)
  }

Файлы для скачивания отсутствуют.

Поблагодарить автора Автор: Turbo

Комментарии (0)

Добавить комментарий