• Страница 1 из 1
  • 1
Эффект тряски изображения при наведении
Lexarus
Offline
Дата: Вторник, 10.05.2016, 09:58 | Сообщение # 1
Постов: «3513»
Лучший админ


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

Код
<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)
    }
evgen99
Offline
Дата: Вторник, 30.08.2016, 08:24 | Сообщение # 2
Постов: «6»
Рядовой
Жаль что в IE не отображается данный Эффект тряски
  • Страница 1 из 1
  • 1
Поиск: