Всем привет! В этой небольшой статье я покажу пример, как можно сделать пролистывающийся текст на чистом CSS3 .

Как сделать пролистывающийся текст на CSS3.

Всем привет! В этой небольшой статье я покажу пример, как можно сделать пролистывающийся текст на чистом CSS3.

Для начала сделаем структуру:

<h1 class="marquee">
  <span>Здесь вы можете написать любой текст</span>
</h1>

А теперь небольшие стили:

@keyframes scroll {
  0% {
   transform: translate(0,0);
  }
  100% {
   transform: translate(-100%,0);
  }
}

.marquee {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 5s infinite linear;
}

Думаю, тут пояснять особо нечего, все и так понятно.

А у меня на этом все. Спасибо за внимание!