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

Анимация появления текста на чистом CSS

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

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

Первый вариант:

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

Как реализовать появление текста HTML, CSS

А так мы после всего наблюдаем все знаки, что были открыты, где не чего не происходит, если не обновить страницу.

HTML

Код

<h1 class="tekstura-sanimatsue">
ZORNET.RU
</h1>

CSS

Код

.tekstura-sanimatsue,
.tekstura-sanimatsue::after {
  animation-delay: 0;
  animation-delay: var(--animation-delay, 2s);
  animation-iteration-count: 1;
  animation-iteration-count: var(--iterations, 1);
  animation-duration: 800ms;
  animation-duration: var(--duration, 800ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.tekstura-sanimatsue {
  position: relative;
  font-size: 53px;
  animation-name: text;
  color: #f3f0f0;
  white-space: nowrap;
  cursor: default;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #827a7a;
}

.tekstura-sanimatsue::after {
  content: "";
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(198, 249, 241, 0.59);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  animation-name: revealer;
  }

@keyframes text {
  from {
  clip-path: inset(0 100% 0 0);
  }
  to {
  clip-path: inset(0 0 0 0);
  }
}

@keyframes revealer {

  0%, 50% {
  transform-origin: 0 50%;
  }

  60%, 100% {
  transform-origin: 100% 50%;
  }


  60% {
  transform: scaleX(1);
  }

  100% {
  transform: scaleX(0);
  }
}

Если вам нужно, чтоб только знаки появлялись, а вот по вверх не было прозрачного фона, то здесь в CSS находим класс .tekstura-sanimatsue::after, который полностью убираем, или выставляем прозрачную гамму цвета.

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

Второй вариант:

Раскрывающий эффекты анимации текста с появлением при входе на сайт.

Где изначально видим одно ключевое слово.

Как сделать анимацию появления текста?

И как оно появилось, то сразу появляется эффект с дополнением.

HTML

Код

<div>ZorNet.Ru</div>
<div>
<span>сайт для вебмастера</span>
</div>

CSS

Код

body {
  text-align: center;
  background: linear-gradient(141deg, #cddfec 25%, #fbddff 40%, #f5c3e5 55%);
  color: #423e3e;
  font-weight: 300;
  font-size: 35px;
  padding-top: 65px;
  height: 100vh;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
}
div {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}
div:first-of-type {
  animation: showup 7s infinite;
}
div:last-of-type {
  width: 0px;
  animation: reveal 7s infinite;
}
div:last-of-type span {
  margin-left: -355px;
  animation: slidein 7s infinite;
}
@keyframes showup {
  0% {
  opacity: 0;
  }
  20% {
  opacity: 1;
  }
  80% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  }
}

@keyframes slidein {
  0% {
  margin-left: -800px;
  }
  20% {
  margin-left: -800px;
  }
  35% {
  margin-left: 0px;
  }
  100% {
  margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
  opacity: 0;
  width: 0px;
  }
  20% {
  opacity: 1;
  width: 0px;
  }
  30% {
  width: 355px;
  }
  80% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  width: 355px;
  }
}

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

А также можете использовать его на своем баннере или в нижнем колонтитулах, где такой эффект для обзора будет довольно хорош для любого сайта. Просмотрев demo страницу, то уже самостоятельно можете определить, где такой эффект будет смотреться по теме в оригинальном оформление сайта.

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

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

17 Сентября 2019 Загрузок: 2 Просмотров: 9196 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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