Шаблон:Бегущая строка/styles.css: различия между версиями

Материал из Space Station 14 Вики
Интерактивная навигация по истории
← Предыдущая правка
Нет описания правки
Нет описания правки
Метка: ручная отмена
 
(не показаны 4 промежуточные версии этого же участника)
Строка 1: Строка 1:
.running-line {
.marquee {
    position: relative;
  display: block;
    width: 100%;
  overflow: hidden;
    height: 32px;
  white-space: nowrap;
    overflow: hidden;
  width: 100%;
    white-space: nowrap;
  padding: 8px 0;
  box-sizing: border-box;
}
}
 
.marquee-inner {
.running-line__item {
  display: inline-block;
    position: absolute;
  white-space: nowrap;
    top: 50%;
  padding-left: 100%;
    transform: translateY(-50%);
  animation: marquee 22s linear infinite;
    left: 100%;
  color: #eaeaea;
 
    animation-name: running-line-scroll;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
}
 
@keyframes marquee {
/* Следующий текст появляется после окончания предыдущего */
  0% { transform: translateX(0); }
.running-line__item:nth-child(1) {
  100% { transform: translateX(-100%); }
    animation-delay: 0s;
}
 
.running-line__item:nth-child(2) {
    animation-delay: 15s;
}
 
.running-line__item:nth-child(3) {
    animation-delay: 30s;
}
 
.running-line__item:nth-child(4) {
    animation-delay: 45s;
}
 
.running-line__item:nth-child(5) {
    animation-delay: 60s;
}
 
@keyframes running-line-scroll {
    0% {
        left: 100%;
    }
 
    100% {
        left: -100%;
    }
}
}

Текущая версия от 16:30, 3 сентября 2026

.marquee {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 8px 0;
  box-sizing: border-box;
}
.marquee-inner {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee 22s linear infinite;
  color: #eaeaea;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
Источник — https://station14.ru/index.php?title=Шаблон:Бегущая_строка/styles.css&oldid=743233