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

Эффект блеска текста на чистом CSS

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

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

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

Как пример на темном фоне:

Установочный процесс:

HTML

Код

<h1 class="blesk_teksta">ZorNet.Ru — сайт для вебмастера</h1>

CSS

Код

.blesk_teksta {
  font-weight: 300;
  font-size: 3em;
  margin: 0 auto;
  padding: 0 155px 0 0;
  display: inline;
  margin-bottom: 0;
}
.blesk_teksta {
  text-align: center;
  color: rgba(236, 228, 228, 0.1);
  background: -webkit-gradient(linear, left top, right top, from(#0e0d0d), to(#101010), color-stop(0.5, #f7f3f3));
  -webkit-background-size: 125px 100%;
  -moz-background-size: 125px 100%;
  background-size: 125px 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-animation-name: shimmer;
  -moz-animation-name: shimmer;
  animation-name: shimmer;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #1d1b1b;
}
@-moz-keyframes shimmer {
  0% {
  background-position: top left;
  }
  100% {
  background-position: top right;
  }
}
@-webkit-keyframes shimmer {
  0% {
  background-position: top left;
  }
  100% {
  background-position: top right;
  }
}
@-o-keyframes shimmer {
  0% {
  background-position: top left;
  }
  100% {
  background-position: top right;
  }
}
@keyframes shimmer {
  0% {
  background-position: top left;
  }
  100% {
  background-position: top right;
  }
}

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

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

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

Видео обзор, где показан полный эффект после установки:

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

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

СКАЧАТЬ

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

Kosten

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