Space Station 14 Вики

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

Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
.marquee {
.running-line {
  overflow: hidden;
    position: relative;
  height: 2.2em;
    width: 100%;
  line-height: 2.2em;
    height: 32px;
  position: relative;
    overflow: hidden;
  width: 100%;
    white-space: nowrap;
}
}


.marquee-inner {
.running-line__item {
  position: absolute;
    position: absolute;
  width: 100%;
    top: 50%;
  animation: vertical-scroll 16s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transform: translateY(-50%);
    left: 100%;
 
    animation-name: running-line-scroll;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
 
/* Следующий текст появляется после окончания предыдущего */
.running-line__item:nth-child(1) {
    animation-delay: 0s;
}
 
.running-line__item:nth-child(2) {
    animation-delay: 15s;
}
 
.running-line__item:nth-child(3) {
    animation-delay: 30s;
}
}


.marquee-inner span {
.running-line__item:nth-child(4) {
  display: block;
    animation-delay: 45s;
  height: 2.2em;
  line-height: 2.2em;
  color: #eaeaea;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
}


@keyframes vertical-scroll {
.running-line__item:nth-child(5) {
  0%, 18%  { transform: translateY(0); }
    animation-delay: 60s;
  22%, 40%  { transform: translateY(-2.2em); }
}
  44%, 62%  { transform: translateY(-4.4em); }
 
  66%, 84%  { transform: translateY(-6.6em); }
@keyframes running-line-scroll {
  88%, 100% { transform: translateY(-8.8em); }
    0% {
        left: 100%;
    }
 
    100% {
        left: -100%;
    }
}
}
Источник — https://station14.ru/wiki/Шаблон:Бегущая_строка/styles.css