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

css悬停鼠标显示文本

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

这是我们将要创建的:

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

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

技术#1

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

指定页面标记

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

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

这是必需的标记:

你可能感兴趣的:(css,js,html,java,javascript,ViewUI)