Страница 1 из 11
Общий форум » Раздел для uCoz » HTML коды для сайта uCoz » Эффект тряски элемента на сайте при наведении
Эффект тряски элемента на сайте при наведении
Kosten
Дата: Пятница, 22.12.2017, 01:16 | Сообщение 1
Администраторы
Сообщений:16150
Награды: 53


Интересное решение для изображение, где при наведение на его начинается тряска на несколько секунд, что можно выставить на логотип. Что также можно поставить в галерею на картинки или под ссылку, вообщем как понимаете у этого эффекта большие возможности в плане его реализаций на интернет ресурсе, но установка у него простая.

Это ставим ссылку под класс и потом стили в CSS, что на этом весь установочный процесс. Сама анимация тряски идет доли секунды, что можно сделать меньше или более по времени и редактировать по своему.



HTML

Код
<a href="http://zornet.ru/"><img src="http://zornet.ru/Aben/JdPP3A0SR5eBIkFnVcMsEg.png" class="zornet_ru_gukazunsa" border="0"></a>

CSS

Код
.zornet_ru_gukazunsa {
  display:inline-block;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  box-shadow:0 0 1px rgba(0,0,0,0)
}
.zornet_ru_gukazunsa:hover,.zornet_ru_gukazunsa:focus,.zornet_ru_gukazunsa:active {
  -webkit-animation-name:buzz-out;
  animation-name:buzz-out;
  -webkit-animation-duration:0.81s;
  animation-duration:0.81s;
  -webkit-animation-timing-function:linear;
  animation-timing-function:linear;
  -webkit-animation-iteration-count:1;
  animation-iteration-count:1
}
@keyframes buzz-out {
  9% {
  -webkit-transform:translateX(5px) rotate(3deg);
  transform:translateX(5px) rotate(3deg)
  }
  19% {
  -webkit-transform:translateX(-3px) rotate(-2deg);
  transform:translateX(-3px) rotate(-3deg)
  }
  29% {
  -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)
  }
  58% {
  -webkit-transform:translateX(-2px) rotate(-1deg);
  transform:translateX(-2px) rotate(-1deg)
  }
  67% {
  -webkit-transform:translateX(2px) rotate(1deg);
  transform:translateX(2px) rotate(1deg)
  }
  79% {
  -webkit-transform:translateX(-2px) rotate(-1deg);
  transform:translateX(-2px) rotate(-1deg)
  }
  89% {
  -webkit-transform:translateX(1px) rotate(0);
  transform:translateX(1px) rotate(0)
  }
  99% {
  -webkit-transform:translateX(-1px) rotate(0);
  transform:translateX(-1px) rotate(0)
  }


Демонстрация:
Прикрепления: 0310339.jpg(28Kb)
Страна: (RU)
Общий форум » Раздел для uCoz » HTML коды для сайта uCoz » Эффект тряски элемента на сайте при наведении
Страница 1 из 11
Поиск: