Для создания бегущей строки в 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%
.