До недавнего времени, бегущая строка в HTML создавалась с помощью всего лишь одного тега – marquee. Но на данный момент браузеры постепенно прекращают его поддержку. Поэтому я не рекомендую использовать <marquee> для реализации бегущей строки на сайте.
Бесконечная бегущая строка CSS
С помощью CSS можно достаточно быстро создать бесконечную бегущую строку с возможностью изменения скорости её передвижения, а также с возможностью остановить анимацию при наведении курсора мыши на строку.
Пример кода
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Рухомий рядок</title>
<style>
.moving-line {
width: 600px; /*ширина блока з рухомим рядком*/
margin: 0 auto; /*вирівнюємо елемент по центру*/
white-space: nowrap; /*відображення пробілів без переносу рядків*/
overflow: hidden; /*відображаємо рухомий рядок тільки в заданій області*/
background-color: #63c8ff; /*колір тіла елемента*/
}
.moving-line p {
padding-left: 100%; /*встановлюємо початкову позицію текста за межами блоку з правої сторони*/
animation: moving-line 25s linear infinite; /*25s - швидкість анімації, infinite - нескінчена анімація*/
}
.moving-line p:hover {
animation-play-state: paused; /*зупиняємо рухомий рядок при наведенні на нього курсора миші*/
}
@keyframes moving-line {
0% { transform: translate(0, 0); } /*початок переміщення*/
100% { transform: translate(-100%, 0); } /*переміщення вздовж осі X*/
}
</style>
</head>
<body>
<div class="moving-line">
<p>Текст рухомого рядка</p>
</div>
</body>
</html>
Угостить автора чашечкой кофе