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

Материал из Space Station 14 Вики
Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
Нет описания правки
Нет описания правки
Строка 1: Строка 1:
.wiki-ticker {
.ticker {
    position: relative;
     width: 100%;
     width: 100%;
    height: 32px;
     overflow: hidden;
     overflow: hidden;
    position: relative;
     white-space: nowrap;
     white-space: nowrap;
}
}


.wiki-ticker > span {
.ticker__track {
     position: absolute;
     display: inline-flex;
    top: 50%;
     width: max-content;
     left: 100%;
     animation: ticker-scroll 30s linear infinite;
    transform: translateY(-50%);
    white-space: nowrap;
    opacity: 0;
     animation-name: wiki-ticker-animation;
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
 
/* Первый текст */
.wiki-ticker > span:nth-child(1) {
    animation-delay: 0s;
}
 
/* Второй текст */
.wiki-ticker > span:nth-child(2) {
    animation-delay: -12s;
}
}


/* Третий текст */
.ticker__track span {
.wiki-ticker > span:nth-child(3) {
    display: inline-block;
     animation-delay: -24s;
     flex-shrink: 0;
    padding-right: 80px;
}
}


/* Четвёртый текст */
@keyframes ticker-scroll {
.wiki-ticker > span:nth-child(4) {
     from {
    animation-delay: -36s;
         transform: translateX(100%);
}
 
/* Пятый текст */
.wiki-ticker > span:nth-child(5) {
    animation-delay: -48s;
}
 
@keyframes wiki-ticker-animation {
     0% {
        left: 100%;
        transform: translateY(-50%);
        opacity: 1;
    }
 
    20% {
        left: 0;
         transform: translate(-100%, -50%);
        opacity: 1;
    }
 
    20.01% {
        opacity: 0;
     }
     }


     100% {
     to {
         opacity: 0;
         transform: translateX(-100%);
     }
     }
}
}

Версия от 16:23, 3 сентября 2026

.ticker {
    width: 100%;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.ticker__track {
    display: inline-flex;
    width: max-content;
    animation: ticker-scroll 30s linear infinite;
}

.ticker__track span {
    display: inline-block;
    flex-shrink: 0;
    padding-right: 80px;
}

@keyframes ticker-scroll {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}
Источник — https://station14.ru/index.php?title=Шаблон:Бегущая_строка/styles.css&oldid=743226