Как создать бегущую строку в HTML/CSS!
Узнайте, как создать бегущую строку в HTML / CSS менее чем за минуту!
Если вы предпочитаете смотреть видео версию, это прямо здесь:
1. Структура HTML.
Создайте базовую структуру HTML с контейнером, а затем буквой «p» с текстом внутри:
<div class="marquee-container">
<p class="marquee">
LONDON - PARIS - SYDNEY - TOKYO - NEW YORK - BERLIN - ROME
</p>
</div>
2. Стиль страницы.
Начните с стилизации контейнера, убедившись, что его переполнение скрыто:
.marquee-container{
display: flex;
align-items: center;
background: #25284c;
overflow: hidden;
}
Затем стилизуйте текст, как хотите, но самое главное создайте анимацию:
.marquee{
font-size: 100px;
line-height: 1.3;
font-family: sans-serif;
padding: 24px 0;
color: #fff;
white-space: nowrap;
animation: marquee 3.5s infinite linear; /* notice the infinite */
Добавьте псевдоэлемент ::after с тем же текстом, что и в "p":
.marquee:after{
content: "LONDON - PARIS - SYDNEY - TOKYO - NEW YORK - BERLIN - ROME";
}
3. Создайте анимацию.
Теперь создадим саму анимацию:
@keyframes marquee{
0% {
transform: translateX(0)
}
100% {
transform: translateX(-50%)
}
}
Это заставит div, содержащий текст, уйти влево, вы можете поставить 50%, если хотите анимировать его вправо.
После 50% ширины он вернется к началу анимации без малейшего вздрагивания, таким образом, запуская анимацию снова и снова.
Это действительно может работать только в том случае, если мы используем один и тот же текст в теге "p" и после него.
Итак, вы создали красивую гладкую бегущую строку!
