Как создать бегущую строку в HTML/CSS! - Web-Global: Связывая миры через веб-технологии
Web-Global

Как создать бегущую строку в HTML/CSS! 

Пост опубликован 19 октября 2022 в 13:05 и находится в рубриках HTML&CSS. 224
Поделиться:

Узнайте, как создать бегущую строку в 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» и после него.