» »

Создать дрожания изображение на CSS


Создать дрожания изображение на CSS

В этом мануале разберем как можно сделать дрожания изображения на сайте. Это может быть и логотип или картинка и при клике дрожать будет. Здесь задействуем CSS вы в начале можете выставить ширину и длину того изображение на которое будет идти эффект. Думаю вы уже встречали, когда наводили клик и изображение начинает быстро ходить по сторонам, здесь также сделаем.

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

Переходим к установке:

Ставим div с классом, там где хотите видеть картинку.

Код
<div class="wibro"></div>


Это копируем и в CSS, что видим wibro отвечать за вывод изображение отвечает и за всю анимацию.

Код
.wibro{
  display: block;
  position: relative;
  width: 18px;
  height: 41px;
  background: url(http://zornet.ru/ZORNET/drental/OohSq3Z.png) no-repeat 0 0;
  }
.wibro:hover {
  -webkit-animation: 0.1s tremor ease-out infinite;  
  animation: 0.1s tremor ease-out infinite;  
}
@-webkit-keyframes tremor {
  0%, 25% {
  left: -1px;
  top:-1px;
  -webkit-transform: translateX(-4%);
  transform: translateX(-4%);
  }
  50%, 100% {
  left: 1px;
  top: 1px;
  -webkit-transform: translateX(4%);
  transform: translateX(4%);
  }
}
@-moz-keyframes tremor {
  0%, 25% {
  left: -1px;
  -webkit-transform: translateX(-4%);
  transform: translateX(-4%);
  }
  50%, 100% {
  left: 1px;
  -webkit-transform: translateX(4%);
  transform: translateX(4%);
  }
}
@-ms-keyframes tremor {
  0%, 25% {
  left: -1px;
  -webkit-transform: translateX(-4%);
  transform: translateX(-4%);
  }
  50%, 100% {
  left: 1px;
  -webkit-transform: translateX(4%);
  transform: translateX(4%);
  }
}
@-o-keyframes tremor {
  0%, 25% {
  left: -1px;
  -webkit-transform: translateX(-4%);
  transform: translateX(-4%);
  }
  50%, 100% {
  left: 1px;
  -webkit-transform: translateX(4%);
  transform: translateX(4%);
  }
}
@keyframes tremor {
  0%, 25% {
  left: -1px;
  -webkit-transform: translateX(-4%);
  transform: translateX(-4%);
  }
  50%, 100% {
  left: 1px;
  -webkit-transform: translateX(4%);
  transform: translateX(4%);
  }
}


PS - как уже было сказано, что все нужно по ширине в ручную подгонять, за это отвечает width: 18px; height: 41px; что в начале найдете. Также здесь нужно сразу сказать, что перейти вы не сможите, а увидите только дрожание, ссылку на переход не установлена и не предусмотрена.
25.12.2016 Просмотров: 358 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
ZruBkul
ZruBkul 25.12.2016 04:201
0
Вот как значит некоторые сайты делают свои логотипы, что они то крутятся то вертятся.
Kosten
Kosten 26.12.2016 14:042
0
Можно под логотип, если там ссылка на главную, чтоб с переходом можно видеть эффект.
avatar