Название: Альтернатива <marquee> средствами CSS

Описание: Применение. Заменяем открывающий и закрывающий теги <marquee> на: <p class="marquee"><span> Здесь текст, который должен "бежать" </span></p>

.marquee {
  width: 77%;  /* задаём длину строки */
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

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

.marquee span:hover {
  animation-play-state: paused;
}

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

Добавил: Den1k
Дата: 9 апр 2021, в 20:43 Комментарии (1)