Анимированный логотип с названием на CSS
 | |
| На любом сайте будет красиво смотреться анимированный логотип, что здесь один из многих представлен виде название и круга в прыжке вверх. Логотипы на анимации растут, и это не удивительно, так как они отличное решение под любою тему, что ранее можно было увидеть только на особых площадках. Но сейчас стили так продвинулись по своим функциям, что все больше появляется разного материала, который отлично подходит, как под функционал, так и безусловно на первом месте стоит в плане дизайн стилистике. Нужно заметить, что не просто форма круга идет, здесь подключаем стили, и создаем оттенок, что уже совершенно по другому смотрится, хоть не 3D, но что-то ближе к такой форме есть возможность выстроить. Наши глаза тяготеют к вещам, которые движутся, где океанские волны, пылающие огни, много есть разных эффектов, но главное не нужно забывать, чтоб аналогично гостям и пользователям нравилось. И этим хочется сказать, что в анимации сильно не нужно гайки закручивать, то иногда такую картину увидишь, но, во-первых, не красиво и сильно грузит полностью сайт. Так что будет здесь подходить с понятием, что понимая про загрузку, но она минимально, просто без нее нет не одной анимации. Эта же привлекательная магия недавно появилась и в дизайне логотипа. При проверки на работочпособность, снят снимок: 1. Здесь видим. что круг поднялся, но все знаки по умолчанию на месте.  2. Аналогично. что можно сказать. что одна фмигура идет под анимацию, знаки можно самостоятельно оформить. Что также они идут под 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; } } Динамический брендинг всегда был проблемой для выяснения того, как сделать логотип подходящим в любом измерении или масштабе. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
