液体填充文本动画可以使用CSS 来完成 | ::before 选择器。我们将使用关键帧为动画的每一帧设置高度。请确保您了解CSS | ::before 选择器和CSS |在尝试此代码之前@keyframes 规则。
文本的基本样式可以以不同的方式完成，这完全取决于您希望文本的外观。主要是关键帧。对于前半部分，我们增加了高度，而在下半部分，我们减少了高度。我们使用 25% 作为高度的最小值。您可以使用百分比值来根据需要更改动画的最小和最大高度以及外观和感觉。
创建结构：在本节中，我们将创建将应用液体填充效果的文本。要创建结构，需要普通的 HTML。
- HTML代码：
Document GeeksforGeeks
设计结构：在开始设计之前，你必须熟悉 CSS 中的几个概念，比如CSS | ::before 选择器和CSS | @keyframes 规则。其他效果完全取决于设计师。
- CSS 代码：
最终解决方案：在本节中，我们将上述两个部分合并为一个部分，并实现对文本的液体填充效果。
- 程序：
How to Create Liquid Filing Effect on Text using HTML and CSS ? GeeksforGeeks
- 输出：
