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

Красивая загрузка текстовой анимации на CSS

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

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

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

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

Анимации загружаемого текста при помощи CSS3

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

HTML

Код

<h1 data-text="ZORNET.RU">ZORNET.RU</h1>

CSS

Код

h1 {
  position: relative;
  color: rgba(23, 21, 21, 0.5);
  font-size: 5em
}
h1:before {
  content: attr(data-text);
  position: absolute;
  overflow: hidden;
  max-width: 6em;
  white-space: nowrap;
  color: #f7f5f5;
  animation: loading 8s linear;
}
@keyframes loading {
  0% {
  max-width: 0;
  }
}

Вывод:

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

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

08 Июля 2018 Просмотров: 1112 Комментариев: (0)

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

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

Kosten

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