如何使用 CSS 创建文本填充动画？

悬停时的文本填充动画是现代网页设计概念的一种文本动画。在此动画中，文本在特定方向上填充了与原始文本颜色不同的颜色，即从左到右、从右到左、从上到下或从下到上。
这种类型的动画不仅限于文本。您可以使用相同的技术来填充任何部分或形状，例如填充玻璃杯或杯子可以很好地实现此动画。

方法：方法是用不同颜色的图层覆盖文本，在开始时保持其宽度为0，并在鼠标悬停时将宽度增加到100％。

HTML 代码：在本节中，我们有一个带有 data-text 属性的“h1”元素，我们将使用它在原始文本上放置一个图层。

  

    
    
    

  

    
Geeks

  

CSS 代码：对于 CSS，请按照以下步骤操作。

• 第 1 步：应用一些基本样式，例如将文本居中对齐和基本背景颜色。
• 步骤2：将内容设置为我们在“h1”标签中使用的属性。这将涵盖原始文本。
• 第3步：将宽度设置为0并设置与文本原始颜色不同的任何颜色。
• 第 4 步：现在将鼠标悬停时的“宽度”设置为 100。

注意：您可以将“宽度”设置为任何其他值，以仅覆盖鼠标悬停时文本的特定部分。例如，将其设置为 50%，这样文本将最多填充长度的一半。

完整代码：是以上两段代码的组合。

  

    
    
    
  
    

  

    
Geeks

  

输出：