ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект текстовой анимации знаков на CSS

Эффект текстовой анимации знаков на CSS

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

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

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

Вообще если изначально с открытием страницы, этот трюк видим в таком обзоре.

Здесь уже наведен курсор и уже совершенно по другому все выглядит.

Текстовая анимация разворота знака на CSS

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

HTML

Код

<div class="mopsagtunlod" data-splitting>
Site Zornet.Ru
</div>

CSS

Код

body {
  margin: auto;
  font-family: Roboto, sans-serif;
}
* {
  transition: all .4s cubic-bezier(0.35,-0.25, 0.35, 1.50);
}
.mopsagtunlod {
  border-radius: 50% 50%;
  padding: 6px 9px 10px 45px;
  background: #245fbb;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 12vw;
  text-transform: uppercase;
  text-shadow: 0px 0px 18px rgba(21, 19, 19, 0.74);
}
.char {
  margin-right: -0.42em;
}
.char:not(:first-child) {
  opacity: 0;
}
.word .char:first-child {
  color:#B0BA23;
  font-size: 1em;
  }


.mopsagtunlod:hover {
  padding: 0px 30px 10px 20px;
  border-radius: 70% 30%;
}
.mopsagtunlod:hover .char {
  margin-right: -0.12em;
}
.mopsagtunlod:hover .char:not(:first-child) {
  opacity: 1;
}

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

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

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

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

СКАЧАТЬ

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

Kosten

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