• Страница 1 из 1
  • 1
Форум » Создание сайта на HTML + CSS » Скрипты сайтов HTML » Бегущая строка на чистом CSS и HTML (Анимированный эффект для текста на CSS)
Бегущая строка на чистом CSS и HTML
Kosten
Дата: Пятница, 06.07.2018, 21:18 | Сообщение 1
Администраторы
Сообщений:17326
Награды: 55


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



HTML

Код
<div class="sindicates-coming">
  <div>
    <span>Новые слухи о производстве AMD GPU и долгосрочных планах - в том числе о некоторых, </span>
    <span>которые предполагают долгое долгое ожидание преемника Vega.</span>
  </div>
</div>


CSS

Код
.sindicates-coming {
  height: 25px;
  width: 615px;

  overflow: hidden;
  position: relative;
}

.sindicates-coming div {
  display: block;
  width: 197%;
  height: 28px;

  position: absolute;
  overflow: hidden;

  animation: marquee 5s linear infinite;
}

.sindicates-coming span {
  float: left;
  width: 50%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}


Демонстрация
Прикрепления: 2269591.jpg(37.5 Kb)
Страна: (RU)
Форум » Создание сайта на HTML + CSS » Скрипты сайтов HTML » Бегущая строка на чистом CSS и HTML (Анимированный эффект для текста на CSS)
  • Страница 1 из 1
  • 1
Поиск: