Get best of the week

纯CSS：4种动画链接颜色的方法

这篇文章的作者（我们今天将要翻译的译文）建议使用纯CSS创建一种机制，当您将鼠标悬停在其上时，可以更改链接文本的颜色。但这不应该是普通的颜色更改。新颜色应从左到右填充该链接，替换旧颜色。


为此，您可以采用本材料中描述的四种方法之一。考虑这些方法，要特别注意各种重要事项，例如内容可访问性，解决方案性能和浏览器支持。

方法1：使用背景剪辑：文本


在撰写本文时，background-clip：text属性是实验性的。Internet Explorer 11及更低版本不支持此功能，该方法涉及以尖锐的渐变效果创建所谓的“ 敲除文本 ”（看起来像是在特定表面上被切掉且背景是半透明的文本）。HTML标记由描述超链接的单个元素组成。<a>

<a href="#">Link Hover</a>

让我们开始为链接创建样式。使用overflow: hidden将导致以下事实：更改链接的外观时，该元素范围之外的所有内容都会被切断。

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

对于链接的开始和结束颜色，我们将需要使用值为50％的尖锐线性渐变。

a {
  /*  ,    */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

使用该属性background-clip修剪渐变。让我们给它一个text显示文本的值。我们将使用的特性background-size和background-position。这样做是为了显示初始颜色。

a {
  /*  ,    */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

最后，在样式中添加CSS属性，并为transition超链接伪类设置样式:hover。当鼠标悬停在链接上时，要使新颜色从左到右填充该链接，请使用属性background-position。

a {
  /*  ,    */
  transition: background-position 275ms ease;
}
a:hover {
  background-position: 0 100%;
}

这是CodePen上的一个示例，尽管此技术可以使您达到预期的效果，但Safari和Chrome会修剪文本和阴影元素。这意味着它们将不会显示。应用文本样式（例如使用CSS属性在文本下划线）text-decoration将不起作用。因此，如果您想在链接上加上下划线，则应考虑其他方式来定制下划线。


方法2：应用宽度/高度


此方法基于data- *属性的使用，该属性包含与tag相同的文本<a>。在这里，您可以使用属性管理width（从左到右或从右到左用颜色填充链接）或属性height（从上到下或从下到上应用效果）。例如，在我们的示例中，将效果应用于属性width，当您将鼠标悬停在链接上时，该属性从0变为100％。这是标记：

<a href="#" data-content="Link Hover">Link Hover</a>

除了背景属性设置外，该CSS与上一个示例中的CSS类似。此外，该属性在这里可以正常工作text-decoration：

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: royalblue;
  font-weight: 800;
  text-decoration: underline;
  overflow: hidden;
}

这是我们需要使用来自属性的文本的地方data-content。该文本将放置在标签内容的顶部<a>。我们可以在此处使用一个有趣的小技巧，该技巧包括从属性复制文本，以及使用链接attr()的content伪元素属性中的函数导出文本::before。

a::before {
  position: absolute;
  content: attr(data-content); /*    */
  top: 0;
  left: 0;
  color: midnightblue;
  text-decoration: underline;
  overflow: hidden;
  transition: width 275ms ease;
}

为了使文本不会跳到新行，将对伪元素应用一种样式white-space: nowrap。要更改链接的颜色，请设置color伪元素的CSS属性::before的值，并使该属性的值在开始时为width0：

a::before {
  /*  ,    */
  width: 0;
  white-space: nowrap;
}

当您将鼠标悬停在鼠标链接上时 ，将width伪元素的值::before增加到100％以应用效果：

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

这是该方法的应用示例，尽管我们根据元素的属性进行操作width并height实现了所需的功能，但该方法以其低生产率而著称。为了以每秒60帧的速度获得平滑的颜色变化，最好使用属性transform或opacity使用属性text-decoration可以让您使用各种样式来强调动画链接中的文本。这是一个示例，展示了使用第三种技术创建的示例，现在我们将对其进行考虑。它基于clip-path的CSS属性的使用。



方法3：使用剪切路径


在这里，我们将使用CSS属性clip-path和多边形（在本例中为矩形）。矩形具有四个角，将鼠标悬停在链接上时，矩形两个边的长度会增加。该图展开，其一侧之一从左移到右。


它使用与上一个示例相同的标记：

<a href="#" data-content="Link Hover">Link Hover</a>

同样，我们将使用伪元素::before。但是CSS在这里有所不同：

a::before {
  position: absolute;
  content: attr(data-content);
  color: midnightblue;
  text-decoration: underline;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 275ms ease;
}

与以前的方法不同，这里text-decoration: underline必须为伪元素设置属性::before。这是必要的，以便颜色更改不仅影响链接的文本，而且影响链接下划线的行。现在让我们看一下该属性的CSS代码clip-path：

clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);

属性中多边形顶点的位置clip-path以百分比指定，它们按照与它们在多边形上的位置相对应的顺序确定坐标：

  • 0 0 =左上角
  • 0 0 =右上角
  • 0 100% =右下角
  • 0 100% =左下角

可以通过修改坐标来更改填充效果的施加方向。现在我们知道了坐标，当您将鼠标悬停在鼠标链接上时，我们可以通过从左向右移动来增加图形：

a:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

这是该示例的工作版本，这种使链接颜色动画化的技术效果很好，但是在使用它之前，请考虑不同浏览器中该属性的支持clip-path。使用CSS创建过渡clip-path效果好于使用高度/宽度技术。但是，使用它会导致浏览器执行非常消耗资源的Paint操作（绘图）的事实。

方法＃4：使用转换


此处使用的标记使用元素遮罩技术<span>。由于我们将使用<span>复制元素中链接内容的内容，因此将使用属性来提高内容的可用性aria-hidden="true"。这将隐藏来自屏幕阅读器的重复文本。

这样的文字不会被重复发两次声：

<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>

元素的CSS <span>包含过渡的描述，该描述从左侧开始：

span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 275ms ease;
}

现在，您需要组织元素<span>向右移动，如下图所示。


为此，请使用::before元素伪元素<span>。而且，像以前一样，我们将诉诸于使用attribute data-content。让我们更改元素的位置，应用变换transform: translateX(100%)，使其沿轴移动X。

span::before { 
  display: inline-block;
  content: attr(data-content);
  color: midnightblue;
  transform: translateX(100%);
  transition: transform 275ms ease;
  text-decoration: underline;
}

与element一样<span>，伪元素的位置::before将使用以下结构设置transform: translateX(0)：

a:hover span::before {
  transform: translateX(0);
}

这是CodePen上的一个示例，尽管该方法具有上述最佳的跨浏览器支持，但需要更多的HTML和CSS来实现。但是，使用CSS属性transform 不会影响性能，使用CSS属性不会导致元素的重绘，因此，会导致每秒60帧的CSS平滑过渡。


摘要


我们只是研究了四种使用CSS达到相同效果的方法。尽管它们每个都有其优缺点，但是您可以看到，将鼠标悬停在它们上方时，组织链接文本颜色的动画是没有可能的。这是一个很小的令人愉悦的效果，使用该效果会导致以下事实：链接被视为更具交互性。

亲爱的读者们！您是否为项目中的链接设置动画？

More articles:


All Articles