ZorNet.Ru — сайт для вебмастера » HTML и CSS » Удивительный эффект анимации текста в CSS

Удивительный эффект анимации текста в CSS

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

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

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

Установка:

HTML

Код

<div class="anumasia_tekta" data-text="Здесь ваше название">Здесь ваше название</div>

CSS

Код

.anumasia_tekta{
  font-size:3rem;
  position:relative;
  line-height: 1.2;
  transform:scale(2, 4);
}
.anumasia_tekta::before,
.anumasia_tekta::after{
  position:absolute;
  top:0;
  left:0;
  content:attr(data-text);
  background:var(--main-bg-color);
  clip:rect(0,0,0,0);
  width:100%;
}
.anumasia_tekta::before{
  animation:anumasia_tekta-2 3s 500 linear alternate-reverse;
  left:-2px;
  text-shadow: 1px 0 #fbe601, 2px 0 #eb3406;
}
.anumasia_tekta::after{
  animation:anumasia_tekta-1 2s 500 linear alternate-reverse;
  left:2px;
  text-shadow: 1px 0 #63c3ea, 2px 0 #2b30d1;
}
@-webkit-keyframes anumasia_tekta-1 {
  0% {
  clip: rect(25px, 600px, 4px, 0);
  }
  5.88235% {
  clip: rect(22px, 600px, 12px, 0);
  }
  11.76471% {
  clip: rect(44px, 600px, 20px, 0);
  }
  17.64706% {
  clip: rect(7px, 600px, 29px, 0);
  }
  23.52941% {
  clip: rect(13px, 600px, 18px, 0);
  }
  29.41176% {
  clip: rect(21px, 600px, 31px, 0);
  }
  35.29412% {
  clip: rect(17px, 600px, 20px, 0);
  }
  41.17647% {
  clip: rect(41px, 600px, 7px, 0);
  }
  47.05882% {
  clip: rect(43px, 600px, 2px, 0);
  }
  52.94118% {
  clip: rect(44px, 600px, 12px, 0);
  }
  58.82353% {
  clip: rect(44px, 600px, 22px, 0);
  }
  64.70588% {
  clip: rect(10px, 600px, 17px, 0);
  }
  70.58824% {
  clip: rect(31px, 600px, 13px, 0);
  }
  76.47059% {
  clip: rect(40px, 600px, 22px, 0);
  }
  82.35294% {
  clip: rect(16px, 600px, 30px, 0);
  }
  88.23529% {
  clip: rect(33px, 600px, 34px, 0);
  }
  94.11765% {
  clip: rect(9px, 600px, 40px, 0);
  }
  to {
  clip: rect(45px, 600px, 21px, 0);
  }
}
@keyframes anumasia_tekta-1 {
  0% {
  clip: rect(25px, 600px, 4px, 0);
  }
  5.88235% {
  clip: rect(22px, 600px, 12px, 0);
  }
  11.76471% {
  clip: rect(44px, 600px, 20px, 0);
  }
  17.64706% {
  clip: rect(7px, 600px, 29px, 0);
  }
  23.52941% {
  clip: rect(13px, 600px, 18px, 0);
  }
  29.41176% {
  clip: rect(21px, 600px, 31px, 0);
  }
  35.29412% {
  clip: rect(17px, 600px, 20px, 0);
  }
  41.17647% {
  clip: rect(41px, 600px, 7px, 0);
  }
  47.05882% {
  clip: rect(43px, 600px, 2px, 0);
  }
  52.94118% {
  clip: rect(44px, 600px, 12px, 0);
  }
  58.82353% {
  clip: rect(44px, 600px, 22px, 0);
  }
  64.70588% {
  clip: rect(10px, 600px, 17px, 0);
  }
  70.58824% {
  clip: rect(31px, 600px, 13px, 0);
  }
  76.47059% {
  clip: rect(40px, 600px, 22px, 0);
  }
  82.35294% {
  clip: rect(16px, 600px, 30px, 0);
  }
  88.23529% {
  clip: rect(33px, 600px, 34px, 0);
  }
  94.11765% {
  clip: rect(9px, 600px, 40px, 0);
  }
  to {
  clip: rect(45px, 600px, 21px, 0);
  }
}
@-webkit-keyframes anumasia_tekta-2 {
  0% {
  clip: rect(8px, 600px, 50px, 0);
  }
  5.88235% {
  clip: rect(40px, 600px, 41px, 0);
  }
  11.76471% {
  clip: rect(33px, 600px, 16px, 0);
  }
  17.64706% {
  clip: rect(41px, 600px, 9px, 0);
  }
  23.52941% {
  clip: rect(14px, 600px, 30px, 0);
  }
  29.41176% {
  clip: rect(22px, 600px, 33px, 0);
  }
  35.29412% {
  clip: rect(37px, 600px, 48px, 0);
  }
  41.17647% {
  clip: rect(25px, 600px, 37px, 0);
  }
  47.05882% {
  clip: rect(1px, 600px, 18px, 0);
  }
  52.94118% {
  clip: rect(19px, 600px, 27px, 0);
  }
  58.82353% {
  clip: rect(33px, 600px, 29px, 0);
  }
  64.70588% {
  clip: rect(2px, 600px, 38px, 0);
  }
  70.58824% {
  clip: rect(18px, 600px, 41px, 0);
  }
  76.47059% {
  clip: rect(19px, 600px, 45px, 0);
  }
  82.35294% {
  clip: rect(44px, 600px, 32px, 0);
  }
  88.23529% {
  clip: rect(13px, 600px, 43px, 0);
  }
  94.11765% {
  clip: rect(4px, 600px, 6px, 0);
  }
  to {
  clip: rect(30px, 600px, 25px, 0);
  }
}
@-keyframes anumasia_tekta-2 {
  0% {
  clip: rect(8px, 600px, 50px, 0);
  }
  5.88235% {
  clip: rect(40px, 600px, 41px, 0);
  }
  11.76471% {
  clip: rect(33px, 600px, 16px, 0);
  }
  17.64706% {
  clip: rect(41px, 600px, 9px, 0);
  }
  23.52941% {
  clip: rect(14px, 600px, 30px, 0);
  }
  29.41176% {
  clip: rect(22px, 600px, 33px, 0);
  }
  35.29412% {
  clip: rect(37px, 600px, 48px, 0);
  }
  41.17647% {
  clip: rect(25px, 600px, 37px, 0);
  }
  47.05882% {
  clip: rect(1px, 600px, 18px, 0);
  }
  52.94118% {
  clip: rect(19px, 600px, 27px, 0);
  }
  58.82353% {
  clip: rect(33px, 600px, 29px, 0);
  }
  64.70588% {
  clip: rect(2px, 600px, 38px, 0);
  }
  70.58824% {
  clip: rect(18px, 600px, 41px, 0);
  }
  76.47059% {
  clip: rect(19px, 600px, 45px, 0);
  }
  82.35294% {
  clip: rect(44px, 600px, 32px, 0);
  }
  88.23529% {
  clip: rect(13px, 600px, 43px, 0);
  }
  94.11765% {
  clip: rect(4px, 600px, 6px, 0);
  }
  to {
  clip: rect(30px, 600px, 25px, 0);
  }
}

На этом установка завершена!

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

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

Если изначально они настроены не под тот фон, то за каждой анимацией закреплена стилистика, что при минимальных знаниях можно поменять оттенки цвета.

Оригинальные текстовые эффекты на CSS

05 Марта 2023 Загрузок: 2 Просмотров: 646 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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