ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация логотипа при наведении курсора

Анимация логотипа при наведении курсора

Если вам нравится анимированный логотип при наведении на его курсора, что после этого задается анимация на чистом CSS, под формат на изображение. Сам трюк состоит в том, что по умолчанию мы наблюдаем снимок, которое выполнено на изображение и поставлено под ссылку.

Где можно задать эффект тряски, который автоматически авторизуется, когда клик окажется на самой картинки логотипа. Этот CSS hover эффект при наведении, где изначально делался под логотип сайта.

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

Установочный процесс:

HTML

Код

CSS

Код

.logotim-portala img:hover,
.logotim-portala img:focus,
.logotim-portala img:active {
  -webkit-animation-name: buzz;
  animation-name: buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes buzz {
  50% {
  -ms-transform: translateX(3px) rotate(2deg);
  -webkit-transform: translateX(3px) rotate(2deg);
  transform: translateX(3px) rotate(2deg);
  }
  100% {
  -ms-transform: translateX(-3px) rotate(-2deg);
  -webkit-transform: translateX(-3px) rotate(-2deg);
  transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes buzz {
  50% {
  -ms-transform: translateX(3px) rotate(2deg);
  -webkit-transform: translateX(3px) rotate(2deg);
  transform: translateX(3px) rotate(2deg);
  }
  100% {
  -ms-transform: translateX(-3px) rotate(-2deg);
  -webkit-transform: translateX(-3px) rotate(-2deg);
  transform: translateX(-3px) rotate(-2deg);
  }
}

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

Демонстрация

31 Октября 2019 Загрузок: 3 Просмотров: 1409 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

Комментарии: 0