ZorNet.Ru — сайт для вебмастера » HTML и CSS » Логотип 3D с эффектом наведение клика

Логотип 3D с эффектом наведение клика

Отлично созданный логотип для сайта в формате 3D, где присутствует эффект при наведении, что автоматически меняется оттенок цветовой гаммы. Действительно необычная текстовая анимация на чистом CSS, которая больше подойдет под заголовки, и безусловно под логотип.

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

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

Так выглядит на светлом фоне, но при эффекте появится ярко малиновой оттенок.

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

HTML

Код

<p>
<span>ZORNET.RU</span>
</p>

CSS

Код

p {
  text-align: center;
  margin-top: 45px;
  color: #474747;
  font: 5em/1em 'Anton';
  text-transform: uppercase;
  text-shadow: 1px 1px #151414, 2px 2px #131212, 3px 3px #0e0e0e, 4px 4px #101010, 5px 5px #0a0a0a, 6px 6px #0a0a0a, 7px 7px 5px rgba(14, 14, 14, 0.5);
}

span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: all 0.2s ease-in-out;
}

span:nth-child(2):hover {
  color: #4aacb8;
  top: 2px;
  left: 2px;
  text-shadow: 1px 1px #137480, 2px 2px #137480, 3px 3px #137480, 4px 4px #137480, 4px 4px 5px rgba(0,0,0,0.5);
}

span:nth-child(3):hover {
  color: #49b8ff;
  top: -8px;
  left: -8px;
  text-shadow: 1px 1px #0a5a8c, 2px 2px #0a5a8c, 3px 3px #0a5a8c, 4px 4px #0a5a8c, 5px 5px #0a5a8c, 6px 6px #0a5a8c, 7px 7px #0a5a8c, 8px 8px #0a5a8c, 9px 9px #0a5a8c, 10px 10px #0a5a8c, 11px 11px #0a5a8c, 12px 12px #0a5a8c, 13px 13px #0a5a8c, 14px 14px 5px rgba(0,0,0,0.5);
}

span:nth-child(4):hover {
  color: #cc3fd9;
  top: 4px;
  left: 4px;
  text-shadow: 1px 1px #8a1994, 2px 2px #8a1994, 2px 2px 3px rgba(0,0,0,0.5);
}

span:nth-child(6):hover {
  color: #d34a87;
  top: -10px;
  left: -10px;
  text-shadow: 1px 1px #8a1348, 2px 2px #8a1348, 3px 3px #8a1348, 4px 4px #8a1348, 5px 5px #8a1348, 6px 6px #8a1348, 7px 7px #8a1348, 8px 8px #8a1348, 9px 9px #8a1348, 10px 10px #8a1348, 11px 11px #8a1348, 12px 12px #8a1348, 13px 13px #8a1348, 14px 14px #8a1348, 15px 15px #8a1348, 16px 16px #8a1348, 16px 16px 8px rgba(0,0,0,0.5), 17px 17px 10px rgba(0,0,0,0.3), 18px 18px 5px rgba(0,0,0,0.5) ;
}

span:hover {
  color: #da2a50;
  text-shadow: 1px 1px #820f28, 2px 2px #8a102a, 3px 3px #800e26, 4px 4px #7b0f26, 5px 5px #821029, 6px 6px #8a112b, 7px 7px #800f28, 8px 8px #860e28, 9px 9px 3px rgba(14, 14, 14, 0.5);
}

span {
  color: #c7fb29;
  text-shadow: 1px 1px #81a023, 2px 2px #8dad2c, 3px 3px #88a235, 4px 4px #749218, 5px 5px #7b9c16, 6px 6px #6b8813, 7px 7px #667f18, 8px 8px #536715, 9px 9px 3px rgba(19, 18, 18, 0.5);
  top: -2px;
  left: -2px;
  transition: all 0.1s ease-in-out;
}
p{
  transform-style:preserve-3d;
  animation:spin 24s linear infinite;
}

Применение CSS3 в заданной анимации, это отличный способ сделать свой сайт или веб страницы уникальными при относительно небольших усилиях. Где из многих примеров можно рассмотреть один, который использует HTML для создания удивительного анимированного логотипа.

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

25 Декабря 2018 Загрузок: 2 Просмотров: 897 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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