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

Переливающийся текст при помощи CSS

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

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

Как пример при проверки на работоспособность анимации:

Как видим, что не так замечена анимация, но главное, это вся настройка происходит в прикрепленной стилистике.

Код

<div class="vasodun_animakun">Здесь идут знаки для анимации</div>

CSS

Код

.vasodun_animakun {
  font-size: 38px;
  line-height: 48px;
  font-family: Verdana, sans-serif;
  font-weight: 900;
  position: relative;
  background: #e8e8e8;
  overflow: hidden;
  text-transform: uppercase;
  text-align: center;
}
.vasodun_animakun:before {
  content: '';
  position: absolute;
  filter: blur(10px);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  background-image: repeating-linear-gradient(
-45deg
, transparent, transparent 1em, #afd4f3 1em, #2287e0 50%), repeating-linear-gradient(
45deg
, #3089d6, #2367a0 1em, #f5f2f2 1em, #b3d7f5 50%);
  background-size: 3em 3em, 2em 2em;
  animation-name: ani;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes ani {
  from {
  background-position: 0 0;
  }
  to {
  background-position: 100% 0;
  }
}
@media (max-width:690px) {
  .vasodun_animakun {font-size: 18px;}
}

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

Демонстрация
Источник: atuin.ru

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

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

СКАЧАТЬ

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

Kosten

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