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

css悬停鼠标显示文本

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

这是我们将要创建的：

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

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

技术＃1

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

指定页面标记

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

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

这是必需的标记：

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

指定基本样式

让我们继续讲CSS样式。

我们将使用本机text-stroke属性将笔触添加到菜单链接。 如今，此属性具有强大的浏览器支持 。 但是，如果需要支持Internet Explorer或Microsoft Edge 12-14，则可以使用text-shadow属性来模拟笔划。

如果您不喜欢文字周围的笔触，则可以创建一种替代布局，该布局将为菜单及其链接添加背景色。 要启用它，只需将has-bg类附加到菜单。

关联的样式如下：

/*CUSTOM VARIABLES HERE*/

.has-bg {
  background: var(--stroke-color);
  padding: 40px 0 60px 0;
  margin-top: 20px;
}

.menu a {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: 60px;
  line-height: 1.4;
  overflow: hidden;
  color: var(--white);
  -webkit-text-stroke: 1px var(--stroke-color);
  /*text-shadow: -1px -1px 0 var(--stroke-color), 1px -1px 0 var(--stroke-color), -1px 1px 0 var(--stroke-color), 1px 1px 0 var(--stroke-color);*/
}

.has-bg a {
  color: var(--secondary-color);
  text-shadow: none;
}

现在介绍动画样式

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

以下是相关的样式：

/*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%);
}

结果演示：

技术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属性设置动画。 另外，如果我们对“向左”或“向顶部”动画感兴趣，则应交换目标伪元素及其父链接的文本颜色值。

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

/*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%;
}

结果演示：

结论

并且，我们完成了！ 在本练习中，我们讨论了创建划像填充悬浮效果的两种不同方法。 希望这些能够启发您构建类似的东西，或者至少将这种效果纳入现有项目中。

一如既往，感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/tutorials/css-hover-effects-techniques-for-creating-a-text-wipe-fill--cms-34137

css悬停鼠标显示文本