Как добиться анимации загрузки текста на нескольких строках?
Я пытаюсь реализовать анимацию загрузки текста, используя только CSS. у меня есть текст черного цвета, затем, когда страница загружается, текст заполняется, начинает заливаться красным цветом в течение нескольких секунд.
Проблема, с которой я столкнулся, заключается в том, что анимация загрузки текста работает нормально, но когда текст заканчивается и начинается с новой строки, текст анимации по-прежнему продолжается в той же строке.
Как я могу это исправить?
body {
background: #3498db;
font-family: sans-serif;
}
h1 {
position: relative;
color: rgba(0, 0, 0, .3);
font-size: 5em;
white-space: wrap;
}
h1:before {
content: attr(data-text);
position: absolute;
overflow: hidden;
max-width: 100%;
white-space: nowrap;
word-break: break-all;
color: #fff;
animation: loading 8s linear;
}
@keyframes loading {
0% {
max-width: 0;
}
}<h1 data-text = "Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.">Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</h1>@Roberrrt привет, я только пытаюсь сократить усилия по написанию большего количества кода. я думаю, что css должно быть наоборот ... я даже пробую другие возможности. а также учитывая, что javascript может быть отключен браузером.
@Roberrrt есть решение с CSS;)
Ответы 1
Идея состоит в том, чтобы рассмотреть градиентную окраску с применением background-clip: text к элементу в линию.
body {
background: #3498db;
font-family: sans-serif;
}
h1 {
font-size: 5em;
}
h1 span {
background:
linear-gradient(#fff,#fff) left no-repeat
rgba(0, 0, 0, .3);
background-size:0% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation:loading 5s forwards linear;
}
@keyframes loading {
to {
background-size:100% 100%;
}
}<h1><span>Suspendisse mollis dolor vitae porta egestas. Nunc nec congue odio.</span></h1>Чтобы лучше понять, как это работает, вот базовый пример, в котором вы можете увидеть, как встроенный элемент ведет себя с окраской фона и чем он отличается от элемента уровня блока:
.color {
font-size: 1.5em;
line-height: 1.5em;
border: 2px solid;
background: linear-gradient(red, red) left no-repeat;
background-size: 0% 100%;
animation: change 5s linear forwards;
}
@keyframes change {
100% {
background-size: 100% 100%
}
}<span class = "color">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</span>
<div class = "color">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</div>Я просто применяю ту же логику, используя background-clip:text, чтобы раскрасить текст вместо фона:
.color {
font-size: 1.5em;
line-height: 1.5em;
border: 2px solid;
background: linear-gradient(red, red) left no-repeat;
background-size: 0% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: change 5s linear forwards;
}
@keyframes change {
100% {
background-size: 100% 100%
}
}<span class = "color">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</span>
<div class = "color">
lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume
</div>Не могли бы вы также объяснить логику этого? Я не могу осмыслить то, что здесь происходит. @TemaniAfif
Ах, игра объяснила это. Но меня все еще поражает то, что работает так, как задумано. Фон-клип: текст; создает фон самого текста. Анимация background-size просто обрабатывает текст как сплошной прямоугольник, поэтому не учитываются разрывы строк. Это действительно очень умно!
@Roberrrt - это все о встроенном элементе ... в отличие от элемента уровня блока, окраска выполняется не для всего блока, а для каждой строки ... это похоже на то, что у вас есть длинная непрерывная линия, которую вы вырезаете, но они все еще связаны. Отметьте это с помощью границы, и вы поймете: jsfiddle.net/xf73yg9u .. затем я применяю ту же логику с фоном, делая только текст цветным
@MithunRaikar Я добавил еще один пример, чтобы объяснить, как это работает
Это не работает на мобильных устройствах (iOS Safari 12): первая строка анимирована, а все остальное остается синим.
Привет! Отличный вопрос, только CSS обязателен? Поскольку я считаю, что это невозможно с помощью простого CSS, потому что вы анимируете ширину тега. Разрывы строк всегда нарушают этот формат.