Шаблон:Бегущая строка/styles.css: различия между версиями
Aeonorien (обсуждение | вклад) Нет описания правки |
Aeonorien (обсуждение | вклад) Нет описания правки |
||
| Строка 1: | Строка 1: | ||
. | .wiki-ticker { | ||
position: relative; | position: relative; | ||
width: 100%; | width: 100%; | ||
| Строка 7: | Строка 7: | ||
} | } | ||
. | .wiki-ticker > span { | ||
position: absolute; | position: absolute; | ||
top: 50%; | top: 50%; | ||
left: 100%; | |||
transform: translateY(-50%); | transform: translateY(-50%); | ||
white-space: nowrap; | |||
opacity: 0; | |||
animation-name: | animation-name: wiki-ticker-animation; | ||
animation-duration: | animation-duration: 60s; | ||
animation-timing-function: linear; | animation-timing-function: linear; | ||
animation-iteration-count: infinite; | animation-iteration-count: infinite; | ||
} | } | ||
/* | /* Первый текст */ | ||
. | .wiki-ticker > span:nth-child(1) { | ||
animation-delay: 0s; | animation-delay: 0s; | ||
} | } | ||
. | /* Второй текст */ | ||
animation-delay: | .wiki-ticker > span:nth-child(2) { | ||
animation-delay: -12s; | |||
} | } | ||
. | /* Третий текст */ | ||
animation-delay: | .wiki-ticker > span:nth-child(3) { | ||
animation-delay: -24s; | |||
} | } | ||
. | /* Четвёртый текст */ | ||
animation-delay: | .wiki-ticker > span:nth-child(4) { | ||
animation-delay: -36s; | |||
} | } | ||
. | /* Пятый текст */ | ||
animation-delay: | .wiki-ticker > span:nth-child(5) { | ||
animation-delay: -48s; | |||
} | } | ||
@keyframes | @keyframes wiki-ticker-animation { | ||
0% { | 0% { | ||
left: 100%; | left: 100%; | ||
transform: translateY(-50%); | |||
opacity: 1; | |||
} | |||
20% { | |||
left: 0; | |||
transform: translate(-100%, -50%); | |||
opacity: 1; | |||
} | |||
20.01% { | |||
opacity: 0; | |||
} | } | ||
100% { | 100% { | ||
opacity: 0; | |||
} | } | ||
} | } | ||