ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создание эффекта перехода с помощью CSS

Создание эффекта перехода с помощью CSS

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

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

Рабочий вариант, где по умолчанию и потом при клике смена идет.

1.

HTML

Код

CSS

Код

.tkiganmil_sunrgam {
  background: url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/hklsSAB1SMqEi5q_5-IB-w.png);
  background-position: top right;
  position: absolute;
  width: 198px;
  height: 198px;
  transition: background 1s cubic-bezier(0.25, 0.1, 0.23, 0.9);
  border: solid 9px #e1e9f3;
  border-radius: 85%;
  box-shadow: 0 0 3px #1b1a1a inset, 0 0 3px #1b1a1a;
  backface-visibility: hidden;
}

.tkiganmil_sunrgam:hover {
  background: url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/ujtqvjHpQOWMqmZ_Bvnq0Q.png);
  ackground-position: bottom right;
  transition: 1s cubic-bezier(0, 0, 0.79, 0.99);
  background-position: -599px -599px;
  transform: rotate(360deg);
}

Размер выставляется в стилях, чтоб корректно выводить.

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

Здесь будем применять анимацию и функцию синхронизации шагов, где перемещаем основу на PNG или другом формате снимка, для достижения интересного эффекта.

Также можно использовать без ссылки.

Код

Здесь просто анимация происходит, что также можно под функционал установить.

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

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

31 Декабря 2017 Просмотров: 1163 Комментариев: (0)

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

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

Kosten

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