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

Цветная анимация текста с помощью CSS

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

Здесь представлен очень простой способ сделать текст миганием, используя только HTML и CSS3. Вы можете настроить значения, установить другую скорость мигания и цвета. План состоял в том, чтобы иметь текст любой длины, отображающий разные цветовые анимационные переходы и порядок цветов, каждый из которых независим для каждой буквы. Из шести возможных цветов каждая буква принимает различную случайную комбинацию этих цветов, а затем дает ей переход анимации в том порядке, в котором он их захватывает. Я также хотел, чтобы текст изменился по мере обновления браузера, поэтому он должен быть довольно гибким, чтобы он мог правильно настроить.

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

HTML

Код

<h1 class="tsanext-animation">ZORNET.RU</h1>

CSS:

Код

.tsanext-animation {
  font-size: 79px;
  font-family: 'sonos-logoregular';
  text-align: center;
  background: -webkit-linear-gradient(left, #503a86, #de494f, #ea8d5b, #ca497a, #6148a0);
  background: linear-gradient(left, #33235B, #D62229, #E97639, #792042, #33235B);
  background-size: 3200px 200px;
  margin-top: 20vh;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-animation: animate-logo;
  -webkit-animation-delay: 0;
  -webkit-animation-duration: 7s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  transition: font-size 500ms ease-in-out;
}
}
@media only screen and (min-width: 40.063em) {
  .tsanext-animation {
  margin-top: 30vh;
  font-size: 80px;
  }
}
@media only screen and (min-width: 64.063em) {
  .tsanext-animation {
  margin-top: 25vh;
  font-size: 79px;
  }
}
@media only screen and (min-width: 90.063em) {
  .tsanext-animation {
  margin-top: 20vh;
  font-size: 80px;
  }
}
@media only screen and (min-width: 120.063em) {
  .tsanext-animation {
  margin-top: 15vh;
  font-size: 79px;
  }
}
@-webkit-keyframes animate-logo {
  0% {
  background-position: 0 3200px;
  }
  100% {
  background-position: 3200px 0;
  }
}

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

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

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

12 Июля 2018 Загрузок: 1 Просмотров: 1565 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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