» »

Анимированный логотип с названием на CSS

Анимированный логотип с названием на CSS

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

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

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

При проверки на работочпособность, снят снимок:

1. Здесь видим. что круг поднялся, но все знаки по умолчанию на месте.

Анимация логотипа сайта

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

Анимация движения CSS

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

HTML

Код
<div class="smallest-compatible">
  <div class="currently-available"></div>
  ZORNET.RU
</div>


CSS

Код
.smallest-compatible {
  margin-top: 47px;
  margin-left: 47px;
  font-size: 57px;
  font-family: sans-serif;
  text-shadow: 0 2px 0 #a9a5a5;
  font-weight: bold;
  color: #1c5c7d;
  box-shadow: 0px 7px 14px rgba(156, 155, 155, 0), 0px 2px 30px -15px rgba(39, 37, 37, 0.11);
}
.currently-available {
  display: inline-block;
  height: 48px;
  width: 48px;
  background-color: #3c82e7;
  border-radius: 75%;
  box-shadow: inset 6px -8px 19px 0px #2b2828;
  -webkit-animation: loading 1s infinite;
  animation: loading 1s infinite;
}

@keyframes loading {
  0%, 100% {
  transform: translateY(0px);
  animation-timing-function: ease-out;
  }
  50% {
  transform: translateY(-27px);
  animation-timing-function: ease-in;
  }
}


Динамический брендинг всегда был проблемой для выяснения того, как сделать логотип подходящим в любом измерении или масштабе.

Демонстрация
09.07.2018 Просмотров: 234 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 09.07.2018 01:161
0
Здесь нужно добавить, что это не логотип на анимации, где изначально шел в другой функциональности, а точнее по теме Анимированные прелоадеры и загрузчики на CSS, где просто посчитал, по своей структуре, такой формат можно на логотип с анимацией вывести, это для дополнение, что может кто то на загрузчик решит поставить.
avatar