Шаблон:Бегущая строка/styles.css: различия между версиями
Aeonorien (обсуждение | вклад) Новая страница: «.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%); } }» |
Aeonorien (обсуждение | вклад) Нет описания правки |
||
| Строка 4: | Строка 4: | ||
white-space: nowrap; | white-space: nowrap; | ||
width: 100%; | width: 100%; | ||
height: 1.6em; | |||
line-height: 1.6em; | |||
position: relative; | |||
} | } | ||
.marquee- | |||
.marquee-item { | |||
position: absolute; | |||
left: 100%; | |||
white-space: nowrap; | white-space: nowrap; | ||
animation: marquee 12s linear infinite; | |||
animation: marquee | |||
color: #eaeaea; | color: #eaeaea; | ||
} | } | ||
.marquee-item:nth-child(1) { animation-delay: 0s; } | |||
.marquee-item:nth-child(2) { animation-delay: 12s; } | |||
.marquee-item:nth-child(3) { animation-delay: 24s; } | |||
.marquee-item:nth-child(4) { animation-delay: 36s; } | |||
.marquee-item:nth-child(5) { animation-delay: 48s; } | |||
@keyframes marquee { | @keyframes marquee { | ||
0% { transform: translateX(0); } | 0% { transform: translateX(0); opacity: 1; } | ||
100% { transform: translateX(- | 70% { transform: translateX(-120%); opacity: 1; } | ||
75% { opacity: 0; } | |||
100% { transform: translateX(-120%); opacity: 0; } | |||
} | } | ||