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

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

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

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

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

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

Приступаем:

HTML

Код

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 страницу, где уже посмотреть, как все устроенно и как вообще работает, но главное в какой области можно сделать применение этого материала.

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

10 Июня 2019 Загрузок: 1 Просмотров: 879 Комментариев: (1)

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

СКАЧАТЬ

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 11 Июня 2019 01:36¹ 0 Как то можно поставить ссылку, чтоб при наведение с начало была анимация, а потом клик на переход.