✅ Как создать анимацию Text Filling?
В этой анимации текст заполняется цветом, в определенном направлении, т. е. слева направо, справа налево, сверху вниз или снизу вверх. ⬇️
☑️ Этот тип анимации не ограничивается только текстом. Вы можете использовать ту же технику, чтобы заполнить любую часть или форму.
Мы сделали вариант оранжевой заливки текста в CSS. В этом коде вы можете поменять цвета и стили под себя: ⤵️
В этой анимации текст заполняется цветом, в определенном направлении, т. е. слева направо, справа налево, сверху вниз или снизу вверх. ⬇️
☑️ Этот тип анимации не ограничивается только текстом. Вы можете использовать ту же технику, чтобы заполнить любую часть или форму.
Мы сделали вариант оранжевой заливки текста в CSS. В этом коде вы можете поменять цвета и стили под себя: ⤵️
span {
font: 700 4em/1 "Oswald", sans-serif;
padding: .25em 0 .325em;
text-shadow: 0 0 80px rgba(255,255,255,.5);
background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: filling 80s linear infinite;
transform: translate3d(0,0,0);
}
@keyframes filling {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
#обучение #css