10.05.2016

Эффект тряски изображения при наведении

Нажмите на изображение для просмотра в полном размере
Эффект тряски изображения при наведении
Суть скрипта в том, что при наведении на изображение курсором, его трясет непродолжительное время то влево то вправо.
Установка:
Код для вставки:

Код
<a href="http://www.csomsk.ru/"><img src="http://www.csomsk.ru/_ld/44/88954010.png" class="brand buzz-out" border="0"></a>


В таблицу стилей (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)
  }
Понравилось:
Категория: Скрипты для ucoz сайтов Просмотров: 2223 Комментариев: 0
К материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!