Как показать текст с помощью эффекта «линейной стирания» с использованием CSS и JavaScript. Как это сделать?линейный стирать текст с использованием CSS или CSS3 анимировать
<p>Text linear wipe </p>
Как показать текст с помощью эффекта «линейной стирания» с использованием CSS и JavaScript. Как это сделать?линейный стирать текст с использованием CSS или CSS3 анимировать
<p>Text linear wipe </p>
Проверьте этот фрагмент:
p{
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: linearwipe 6s steps(60, end);
}
@keyframes linearwipe{
from { width: 0; }
}
<p>Text linear wipe </p>
Спасибо, приятель, мне нужен тот же эффект, но текст не должен двигаться. Он должен быть в том же месте. ех. «ввод текста». –
именно это я хочу, можем ли мы добавить непрозрачность от 0 до 100%? –
да, вы можете добавить 'opacity: 0;' to opacity: 1; ' –
Этот код работает прекрасно:
CSS:
.linear-wipe{
white-space: nowrap;
overflow: hidden;
animation: linearwipe 1s steps(100, end);
opacity: 1;
width: 0%;
}
@keyframes linearwipe{
from { width: 0;opacity: 0 }
}
Что вы имеете в виду под «линейной WIP е "? Отображать по одному символу за раз, пока не отобразятся все символы? – guest271314
да, то есть Linear Wipe на самом деле :) –