• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Анимация изменения текста с помощью CSS (Смена анимационного текста при помощи CSS)
Анимация изменения текста с помощью CSS
Kosten
Дата: Четверг, 2018-12-27, 00:02 | Сообщение 1
Администраторы
Сообщений:21691
Награды: 56


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

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



HTML

Код
  <div id=kegaremedes>
  На сайте
  <div id=saighogard-mesabukod>
    <div><div>Скрипты</div></div>
    <div><div>Шаблоны</div></div>
    <div><div>Дизайн</div></div>
  </div>
  ZORNET.RU
</div>


CSS

Код
#kegaremedes {
  color:#989292;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

#saighogard-mesabukod {
  height:50px;
  overflow:hidden;
}

#saighogard-mesabukod > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#saighogard-mesabukod div:first-child {
  animation: show 5s linear infinite;
}

#saighogard-mesabukod div div {
  background:#42c58a;
}
#saighogard-mesabukod div:first-child div {
  background:#4ec7f3;
}
#saighogard-mesabukod div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

На этом вся установка, как можно заметить, что не чего сложного в установке нет, главное по уму расположить такой эффект на интернет ресурсе.

Демонстрация
Прикрепления: 9159882.png(11.8 Kb) · tunid.zip(1.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Анимация изменения текста с помощью CSS (Смена анимационного текста при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: