Как сделать бегущую строку в css

Для создания бегущей строки в CSS можно использовать свойство animation. Для этого нужно определить анимацию с помощью @keyframes, затем применить её к элементу с помощью animation.

Пример кода для создания бегущей строки:

HTML:

<div class="marquee-container">
  <div class="marquee">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

CSS:

.marquee-container {
  overflow: hidden;
  height: 20px;
}

.marquee {
  animation: marquee 10s linear infinite;
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

В этом примере элемент .marquee содержит бегущий текст, который находится внутри контейнера .marquee-container. Контейнер .marquee-container имеет фиксированную высоту и overflow: hidden, чтобы скрыть содержимое .marquee, которое выходит за его границы.

Анимация определена с помощью @keyframes. В начале анимации (0%), текст находится в начальном положении, а в конце (100%) текст сдвигается влево на 100% от ширины элемента .marquee.

С помощью animation анимация marquee применяется к элементу .marquee, её длительность равна 10 секундам, linear определяет равномерную скорость перемещения текста, а infinite позволяет анимации циклически повторяться.

Чтобы текст перемещался горизонтально, не переносится на новую строку, свойство white-space установлено в значение nowrap, а для сдвига содержимого внутри .marquee используется padding-right: 100%.