ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированный эффект при наведении CSS3

Анимированный эффект при наведении CSS3

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

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

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

Там смотрится при проверки на работоспособность, хотя у каждого своя форма будет, здесь главная анимация.

Красивая анимация CSS

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

HTML

Код

<div class="slidesurom-resentation">
<span><i class="fa fa-thumbs-o-up"></i></span> <a href="http://zornet.ru">Звонок</a>
</div>

CSS

Код

.slidesurom-resentation {
  display: table;
  cursor:pointer;
}

.fa-thumbs-o-up {
  color: #eef334;
  display: inline-block;
  font-size: 27px !important;
  line-height: 35px !important;
  text-shadow: 0 1px 2px rgba(12, 12, 12, 0.56);
  transform-origin: 50% 0 0;
  vertical-align: middle;
}

.slidesurom-resentation span {
  background-color: #205d80;
  border-radius: 85%;
  display: inline-block;
  margin: 10px 5px;
  padding: 6px;
  width: 37px;
  height: 37px;
  text-align: center;
  border: 3px solid #cdddfb;
}

.slidesurom-resentation:hover > span i {
  animation: 1300ms ease 0s normal none 1 running shake;
}
@keyframes shake {
0% {
  transform: rotateZ(0deg);
}
10% {
  transform: rotateZ(-30deg);
}
20% {
  transform: rotateZ(15deg);
}
30% {
  transform: rotateZ(-10deg);
}
40% {
  transform: rotateZ(7.5deg);
}
50% {
  transform: rotateZ(-6deg);
}
60% {
  transform: rotateZ(5deg);
}
70% {
  transform: rotateZ(-4.28571deg);
}
80% {
  transform: rotateZ(3.75deg);
}
90% {
  transform: rotateZ(-3.33333deg);
}
100% {
  transform: rotateZ(0deg);
}
}

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

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

28 Июня 2018 Просмотров: 1030 Комментариев: (0)

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

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

Kosten

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