CSS 悬停效果：创建文本“擦除填充”的技术

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

CSS 悬停效果：创建文本“擦除填充”的技术第1张

这是我们将要创建的内容：

See the Pen CSS Hover Effect: Techniques for Creating a Text Fill Wipe by Envato Tuts+ (@tutsplus) on CodePen.

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

使用 css 过渡，您可以将擦除效果的速度和缓动更改为适合您项目的任何内容。

技术#1

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

指定页面标记

我们将从一个代表典型页面菜单的普通无序列表开始。每个菜单链接将包括一个文本节点和一个span元素。中的文本span 将匹配列表项的文本。我们将给出这个元素 aria-hidden="true"，因为我们想对任何可访问性设备隐藏它。事实上，它存在的唯一原因是为了帮助我们构建所需的悬停效果。

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

这是所需的标记：

<ul class="menu">
 <li>
 <a href="#0">
 About Us
 
 About Us
 
 </a>
 </li>
 <li data-animation="to-left">
 <a href="#0">
 Projects
 
 Projects
 
 </a>
 </li>
 <li data-animation="to-bottom">
 <a href="#0">
 Clients
 
 Clients
 
 </a>
 </li>
 <li data-animation="to-top">
 <a href="#0">
 Contact
 
 Contact
 
 </a>
 </li>
</ul>

指定基本样式

让我们继续 CSS 样式。

我们将使用 native text-stroke属性为菜单链接添加笔触。如今，这个属性有很好的浏览器支持。但是，如果您需要支持 Internet Explorer 或 Microsoft Edge 12-14，您可以使用该text-shadow属性来模拟笔画。

如果您不喜欢文本周围的笔划，我创建了一个替代布局，它将在菜单及其链接中附加背景颜色。要启用它，只需将has-bg类附加到菜单。

现在是动画样式

链接内部的外部span将被绝对定位。此外，我们将给它一个深青色背景颜色并将其overflow属性设置为hidden. 默认情况下，我们会将其原始位置的 100% 向左移动，将其原始位置的内部span100% 向右移动。然后，每次我们将鼠标悬停在链接上时，我们都会删除它们的初始变换值。这个简单的技巧将产生一个从左到右的填充文本悬停效果。

以下是相关的样式：

/*CUSTOM VARIABLES HERE*/

.menu .outer {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--fill-color);
  transform: translateX(-100%);
}

.menu .inner {
  display: inline-block;
  transform: translateX(100%);
}

.menu a .outer,
.menu a .inner {
  transition: transform 0.15s cubic-bezier(0.29, 0.73, 0.74, 1.02);
}

.menu a:hover .outer,
.menu a:hover .inner {
  transform: none;
}

指定方向

最后，正如标记部分所讨论的，我们可以通过将 data-animation属性传递给菜单项来自定义悬停效果的方向。根据效果方向（水平或垂直），我们必须为.outer和.inner元素定义反向变换值：

[data-animation="to-left"] .outer {
  transform: translateX(100%);
}

[data-animation="to-left"] .inner {
  transform: translateX(-100%);
}

[data-animation="to-top"] .outer {
  transform: translateY(100%);
}

[data-animation="to-top"] .inner {
  transform: translateY(-100%);
}

[data-animation="to-bottom"] .outer {
  transform: translateY(-100%);
}

[data-animation="to-bottom"] .inner {
  transform: translateY(100%);
}

结果演示：

See the Pen CSS Hover Effect: Techniques for Creating a Text Fill Wipe by Envato Tuts+ (@tutsplus) on CodePen.

技术#2

现在让我们检查第二种技术，其中我们通过使用伪元素提供“擦除填充”来保持我们的标记更清晰。

指定页面标记

我们将从一个普通的无序列表重新开始。每个菜单链接都将包含data-text自定义属性。此属性的值将匹配相关链接的文本。

与前面的示例类似，我们将能够通过data-animation属性自定义动画的起始位置。可能的属性值为to-left、to-bottom和to-top。默认情况下，效果会从左到右出现。

这是让我们开始所需的标记：

<ul class="menu">
 <li>
 <a data-text="About Us" href="#0">About Us</a>
 </li>
 <li data-animation="to-left">
 <a data-text="Projects" href="#0">Projects</a>
 </li>
 <li data-animation="to-bottom">
 <a data-text="Clients" href="#0">Clients</a>
 </li>
 <li data-animation="to-top">
 <a data-text="Contact" href="#0">Contact</a>
 </li>
</ul>

指定动画样式

用于此的基本 CSS 样式与前面的技术相同。对于动画，我们将定义::before 每个菜单链接的伪元素并对其进行绝对定位。它的内容将来自data-text父链接的属性值。最初，它的宽度将为 0，但是当我们将鼠标悬停在目标链接上时，它将被设置为 100%。另外，我们会给它white-space: nowrap ，所以文本永远不会换行。

与此相关的样式如下：

/*CUSTOM VARIABLES HERE*/

.menu a::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  color: var(--fill-color);
  white-space: nowrap;
  transition: all 0.15s cubic-bezier(0.29, 0.73, 0.74, 1.02);
}

.menu a:hover::before {
  width: 100%;
}

添加悬停效果样式

接下来，我们将添加负责自定义悬停效果方向的样式。所以首先，我们必须检查所需动画的方向（水平或垂直），然后相应地为目标伪元素的width或属性设置动画。height此外，如果我们对“to left”或“to top”动画感兴趣，我们应该交换目标伪元素及其父链接的文本颜色值。

处理这些动画的样式如下：

/*CUSTOM VARIABLES HERE*/

.menu [data-animation="to-left"] a,
.menu [data-animation="to-top"] a {
  color: var(--fill-color);
}

.menu [data-animation="to-left"] a::before,
.menu [data-animation="to-top"] a::before {
  color: var(--white);
}

.menu [data-animation] a::before {
  width: 100%;
}

.menu [data-animation="to-left"] a:hover::before {
  width: 0;
}

.menu [data-animation="to-top"] a::before {
  height: 100%;
}

.menu [data-animation="to-top"] a:hover::before {
  height: 0;
}

.menu [data-animation="to-bottom"] a::before {
  height: 0;
}

.menu [data-animation="to-bottom"] a:hover::before {
  height: 100%;
}