css悬停鼠标显示文本_CSS悬停效果：创建文本“划像填充”的技术

css悬停鼠标显示文本

在今天的教程中，我们将学习两种在悬停时创建“擦除填充”文本效果的不同技术。 我们甚至会更进一步，让自己可以灵活地选择动画的方向。

这是我们将要创建的：

如您所见，当您将鼠标悬停在文本上时，将应用填充，从而从一侧擦到另一侧。 上方的菜单链接一开始没有明显的填充，而是有一个文本笔触，然后看起来像是在悬停时填充了。

使用CSS过渡，您可以将擦除效果的速度和缓和程度更改为适合您的项目的速度。

技术＃1

让我们看一下第一种技术，其中使用一些额外的标记来创建每个链接的“擦除填充”元素。

指定页面标记

我们将从一个普通的无序列表开始，它将代表一个典型的页面菜单。 每个菜单链接将包括一个文本节点和一个span元素。 span内的文本将与列表项的文本匹配。 我们将此元素设置为aria-hidden="true"因为我们希望将其隐藏在所有可访问性设备中。 实际上，它存在的唯一原因是帮助我们建立所需的悬停效果。

作为奖励，我们将使自己能够设置悬停效果动画的方向。 我们可以将data-animation自定义属性传递给列表项，这些项将确定其动画的开始位置。 可能的属性值为to-left ， to-bottom和to-top 。 默认情况下，效果将从左到右显示。

这是必需的标记：

  

    
      About Us
      
        About Us
      
    
  
  

    
      Projects
      
        Projects