ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создать дрожания изображение на CSS

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

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

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

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

Ставим 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 Декабря 2016 Просмотров: 3081 Комментариев: (2)

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

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

Kosten

Комментарии: 2
Порядок вывода комментариев: ZruBkul 25 Декабря 2016 04:20¹ 0 Вот как значит некоторые сайты делают свои логотипы, что они то крутятся то вертятся. Kosten 26 Декабря 2016 14:04² 0 Можно под логотип, если там ссылка на главную, чтоб с переходом можно видеть эффект.