Анимация жидкой заливки текста может быть выполнена с помощью CSS | ::before селектором. Пожалуйста, убедитесь, что вы знаете CSS | ::before селектор и CSS | @keyframes Правило, прежде чем попробовать этот код.
Создание структуры: в этом разделе мы создадим текст, в котором мы применим эффект заполнения жидкостью. Для создания структуры потребуется обычный HTML.
Структура дизайна: Перед тем, как начать дизайн, вы должны ознакомиться с несколькими концепциями CSS, такими как CSS | ::before селектором и CSS | Правило @keyframes . Другие эффекты полностью зависят от дизайнера.
Базовое оформление текста может быть сделано по-другому, что полностью зависит от вас, как вы хотите, чтобы ваш текст выглядел. Главное с ключевыми кадрами.
Мы будем использовать ключевые кадры, чтобы установить высоту для каждого кадра анимации.
Для первой половины процентов мы увеличиваем высоту, а для следующей половины мы уменьшаем высоту. Мы использовали 25% как минимальное значение для высоты. Вы можете поиграть со значениями в процентах, чтобы изменить минимальную и максимальную высоту и внешний вид анимации в соответствии с вашими потребностями.
- Вывод:
