КАк сделать бегущую строку с таким контентом?

Question

<div class="text">
  <span>text 1</span>
  <span>text 2</span>
</div>

Answer 1

Например, есть такой старый html-тег marquee:

.text {
  background-color: #242424;
  padding: .3em 0;
  max-width: 300px;
  font-family: monospace;
  font-size: 32px;
  color: tomato;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 0 .2em tomato;
}

<marquee class="text">
  <span>text 1</span>
  <span>text 2</span>
</marquee>

Еще можно через css-анимации:

@keyframes marquee {
  0% {
    left: 100%;
  }
  100% {
    left: 0;
    transform: translateX(-100%);
  }
}

.marquee {
  width: fit-content;
  position: relative;
  top: 0;
  animation: marquee 5s infinite linear;
}

.text {  
  background-color: #242424;
  padding: .3em 0;
  width: 300px;
  font-family: monospace;
  font-size: 32px;
  color: tomato;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 0 .2em tomato;
}

<div class="text">
  <div class="marquee">
    <span>text 1</span>
    <span>text 2</span>
  </div>
</div>

Answer 2

Предлагаю такой простенький вариант:

.marquee {
  width: 50%;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.marquee .content {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 4s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

<div class="marquee">
  <div class="content">
    <span>text 1</span>
    <span>text 2</span>
    <span>text 3</span>
    <span>text 4</span>
  </div>
</div>

Больше примеров тут и тут

БЛОГ НА HUSL

КАк сделать бегущую строку с таким контентом?

Ответы (2 шт):