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

悬停时的文本填充动画是现代Web设计概念的一种文本动画。在此动画中, 文本在特定方向(即, 从左到右, 从右到左, 从上到下或从下到上)的颜色与原始文本的颜色不同。

这种动画类型不仅限于文本。你可以使用相同的技术来填充任何零件或形状, 例如填充杯子或杯子可以很好地实现此动画。

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

HTML代码：在本节中, 我们有一个带有数据文本属性的" h1"元素, 我们将使用它在原始文本上放置一个图层。

  

    
    
    

  

    
Geeks

  

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

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

注意：你可以将"宽度"设置为任何其他值, 以仅覆盖鼠标悬停时文本的特定部分。例如, 将其设置为50％, 以使文本最多只能填充一半的长度。

完整的代码：它是以上两部分代码的组合。

  

    
    
    
  
    

  

    
Geeks

  

输出如下：

更多前端开发相关内容请参考：lsbin - IT开发技术：https://www.lsbin.com/

参考以下更多CSS相关的内容：

• CSS实现分页：https://www.lsbin.com/435.html
• CSS calc()函数：https://www.lsbin.com/1572.html
• CSS表单样式美化：https://www.lsbin.com/3204.html