» »

Анимация перехода по ссылке для сайта

Анимация перехода по ссылке для сайта

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

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

При открытии сайта или по умолчанию:



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



Приступаем:

HTML

Код
<div class="capating"></div>
<div class="angiancub"></div>
<div class="unematic"></div>

CSS

Код
* {
  -moz-transition: all .4s ease;
  -ms-transition: all .4s ease;
  -o-transition: all .4s ease;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}
.capating {
  background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/sazefdsa.png) no-repeat;
  height: 257px;
  position: relative;
  top: 45px;
  width: 130px;
  margin: 0 auto;
  cursor:pointer;
}
.capating:hover { top: 0 }
.angiancub {
  background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/7aGYTAN.png) no-repeat;
  height: 30px;
  left: 10px;
  position: relative;
  top: -285px;
  width: 107px;
  z-index: 3;
  margin: 0 auto;
}
.capating:hover ~ .angiancub { top: -210px }
.unematic {
  background: #eeeef7;
  border-top: 1px solid #181819;
  height: 130px;
  position: relative;
  top: -150px;
  width: 130px;
  z-index: 1;
  margin: 0 auto;
}
.capating:hover ~ .unematic { border-top: 1px solid #eeeef7;  
}

Также можете пройти ниже по ссылке на demo страницу, где уже посмотреть, как все устроенно и как вообще работает, но главное в какой области можно сделать применение этого материала.

Демонстрация
2019-06-10 Загрузок: 1 Просмотров: 286 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 2019-06-11 01:361
0
Как то можно поставить ссылку, чтоб при наведение с начало была анимация, а потом клик на переход.
avatar