Бегущая строка

Код:

<div class="marquee" text="Привет тебе, о дивный мир !!!"></div>

<style>
  
.marquee {
  pointer-events: none;
  rotate: 0deg;
margin: 0px -1rem;
    background-color: #F4CA16;
    font: 900 22px / 1.5 monospace, system-ui;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

.marquee::before, .marquee::after {
    content: attr(text) "\a0";
    min-width: 100%;
    will-change: transform;
    animation: text-display 15s linear infinite;
    animation-direction: inherit;
    flex: 1 0 auto;
    text-align: center;
  color: black;
}

@keyframes text-display {
    to {
        transform: translateX(-100%);
    }
}
</style>

Что менять:

1. Текст в

text="Привет тебе, о дивный мир !!!"

на свой

2. Наклон. Можете наклонить надпись, чтобы выглядело так:

Для этого в

 rotate: 0deg;
margin: 0px -1rem;

поменяйте 0deg на угол наклона. Например на 15deg, тогда будет как на картинке выше. Можно сделать -15deg для наклона в обратную сторону. При добавлении наклона полоски начинает не хватать для того, чтобы застилать весь экран, поэтому и -1rem в margin надо поменять. Пример итогового значения

  rotate: 15deg;
margin: 0px -2.4rem;

То есть при 15 градусах margin по горизонтали должен быть -2.4rem, чтобы смотрелось хорошо

Если вам нужно, чтобы полоска была под остальными элементами, а не над ними, допишите строки

position: relative;
z-index: -1;

Прописывать внутрь .marquee, то есть по итогу должно получиться такое:

.marquee {
  z-index: -1;
  position: relative;
  pointer-events: none;
  rotate: 15deg;
margin: 0px -2.4rem;
    background-color: #F4CA16;
    font: 900 22px / 1.5 monospace, system-ui;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

Также можете поменять цвет полоски
background-color: #F4CA16;

на свой, и цвет текста

color: black;

на свой. Коды цветов можно взять тут https://colorscheme.ru/color-converter.html