Измените код CSS, чтобы лучше маскировать прокручиваемый текст. ⇐ Html

[Anonymous]

Я новичок в HTML/CSS и пытаюсь научиться лучше маскировать анимированный текст. Вот как сейчас выглядит вывод кода:


Я хочу, чтобы слова, которые не соответствуют остальному основному тексту (слова, которые прокручиваются), были замаскированы фоном или имели тот же цвет, что и фон (в настоящее время #F6F6F6). Как мне это сделать?

Код: Выделить всё

body {
font-size: 2em;
font-family: arial;
line-height: 1.2
}

.animation {
display: inline-block;
vertical-align: top;
text-align: relative;
border: none;
overflow: visible;
white-space: nowrap;
color: #f6f6f6;
position: relative;
}

.animation ul {
list-style: none;
padding: 0 .5ex;
margin: 0;
height: 1.2em;
}

.animation li {
position: relative;
animation: cycle-5-items 5s ease-in-out alternate infinite;
color: blue;
font-weight: bold;
}

.animation ul.mask {
color: black;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

@keyframes cycle-5-items {

0%,
10% {
transform: translateY(0%);
}

15%,
35% {
transform: translateY(-100%);
}

40%,
60% {
transform: translateY(-200%);
}

65%,
85% {
transform: translateY(-300%);
}

90%,
100% {
transform: translateY(-400%);
}
}

Код: Выделить всё

Remove hair on your


[list]
[*]face
[*]legs
[*]bikini
[*]brows
[*]underarms
[/list]
[list]
[*]face
[*]legs
[*]bikini
[*]brows
[*]underarms
[/list]

Подробнее здесь: https://stackoverflow.com/questions/798 ... lling-text