CSS链接悬停效果的6个创意

科技 09-05 来源：兴趣编程网

一、滑动高亮链接悬停效果

此效果将框阴影应用于内联链接，从而改变过程中链接文本的颜色。我们从链接周围的填充开始，然后添加相同值的负边距以防止填充破坏文本流。

我们将使用box-shadow而不是 background 属性，因为它允许我们转换。

a {
  box-shadow: inset 0 0 0 0 #54b3d6;
  color: #54b3d6;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  box-shadow: inset 100px 0 0 0 #54b3d6;
  color: white;
}

二、文本交换链接悬停效果

这是一个有趣的例子，我们在悬停时将链接的文本与其他一些文本交换。将鼠标悬停在文本上，链接的文本会随着新文本的滑入而滑出。

这个链接悬停效果中发生了相当多的诡计。但神奇的方法是使用数据属性来定义滑入的文本并使用content链接的::after伪元素的属性调用它。

首先，HTML 标记：

Hover get a link

这是很多内联标记，但您正在查看包含链接和跨度的段落标记。

让我们给链接一些基本样式。我们需要给它相对定位来固定伪元素——这将是绝对定位的——在适当的位置，确保它的显示是inline-block为了获得盒子元素样式的可供性，并隐藏伪元素可能导致的任何溢出。

a {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

和伪元素应该有一些绝对定位，以便它们与实际链接堆叠::before。::after我们将确保将它们设置为链接的全宽，左侧位置为零偏移，为一些滑动操作设置它们。

a::before,
a::after {
 content: '';
  position: absolute;
  width: 100%;
  left: 0;
}

::after伪元素从 HTML 标记中的链接数据属性获取内容：

a::after {
  content: attr(data-replace);
}

现在我们可以transform: translate3d()将::after伪元素元素向右移动 200%。我们将它移回上的位置:hover。当我们这样做时，我们可以给这个top方向一个零偏移量。::before稍后当我们使用伪元素（如文本下方的下划线）时，这将很重要。

a::after {
  content: attr(data-replace);
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
}

a:hover::after,
a:focus::after {
  transform: translate3d(0, 0, 0);
}

我们还将transform: scale()使用::before伪元素，因此默认情况下它是隐藏的，然后将其放大到:hover. 我们将使它变小，就像2px高度一样，并将其固定到上bottom，使其看起来像文本上的下划线，与::after.

a::before {
  background-color: #54b3d6;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
}

a:hover::before,
a:focus::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

其余的都是偏好！我们transition加入了transform效果、一些颜色等等以获得完整的效果。这些值完全取决于您。

三、不断增长的背景链接悬停效果

这是我在很多地方看到的非常流行的效果。这个想法是您将链接的::before伪元素用作位于链接实际文本后面的粗下划线。然后，在悬停时，伪元素会扩展以覆盖整个事物。

好的，链接的一些基本样式。我们不想要，text-decoration因为::before会像一个一样，然后::before在我们给出绝对定位时保持一些相对定位。

a {
  text-decoration: none;
  position: relative;
}

现在让我们将其设置::before为高一些8px，使其看起来像一个粗下划线。我们还将给它绝对定位，这样我们就可以控制它使其成为实际链接的全宽，同时偏移它，使它在left并且只是一点点，bottom所以它看起来像是在巧妙地突出链接。不妨给它，z-index: -1这样我们就确信它位于链接后面。

a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
}

好好。当链接悬停时，让我们让它看起来好像::before在增长。我们需要的只是将高度从更改3px为100%。请注意，我还将bottom偏移量放回零，以便背景在增长时覆盖更多空间。

a:hover::before {
  bottom: 0;
  height: 100%;
}

现在对这些更改进行轻微过渡：

a::before {
  content: '';
  background-color: hsla(196, 61%, 58%, .75);
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 8px;
  z-index: -1;
  transition: all .3s ease-in-out;
}

四、从右到左的颜色交换链接悬停效果

我个人喜欢将这种效果用于导航中的链接。链接以一种颜色开始，没有下划线。然后，在悬停时，一种新颜色从右侧滑入，而下划线从左侧滑入。

整洁，对吧？那里发生了很多运动，因此您可能会考虑可访问性含义并将其全部包装在prefers-reduced-motion查询中，以将其替换为对运动敏感的人来说更微妙的东西。

这是它的工作原理。我们给链接一个线性背景渐变，在中间标记处有两种颜色之间的硬停止。

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
}

我们将背景设置为链接宽度的两倍，或者200%, 并将其一直定位到左侧。这样，就好像只有两种颜色的渐变中的一种正在显示。

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
}

当我们达到几个非标准的-webkit-前缀属性时，魔法就会发生。一个从文本中去除颜色以使其透明。另一个将背景渐变剪辑到文本，因此看起来文本实际上是背景的颜色。

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

还在我这儿？现在让我们通过::before使用来制作链接的人造下划线。我们将赋予它与链接背景渐变的隐藏部分相同的颜色，并将其放置在实际链接下方，使其看起来像一个合适的text-decoration: underline.

a:before {
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
}

悬停时，我们::before从左侧滑入：

a:hover {
 background-position: 0;
}

现在，这有点棘手。在悬停时，我们将链接的::before伪元素设为链接宽度的 100%。如果我们将它直接应用到链接的悬停，我们会使链接本身全宽，这会在屏幕上移动它。哎呀！

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

添加一点过渡以使事情变得顺畅：

a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

五、彩虹下划线链接悬停效果

我们做不到text-decoration-color: rainbow，但我们可以用一点background魔法和线性渐变混合来伪造它。

首先，我们删除链接的text-decoration：

a {
  text-decoration: none;
}

现在对于那些渐变。我们在同一个background属性上将两个线性梯度链接在一起。一种渐变是悬停前的初始颜色。第二个是悬停时的彩虹。

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
}

让我们将背景尺寸设置为3px高一点，这样它看起来就像，你知道的，一个下划线。我们可以在background-size属性上同时调整两个渐变的大小，以便初始渐变是全宽和3px高的，而彩虹是零宽度。

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
}

现在我们可以定位背景渐变——同时在background-position属性上——这样第一个渐变完全在视野中，彩虹被推到视野之外。哦，让我们确保在我们处理它时背景不会重复。

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
}

让我们更新background-sizeon hover 以便渐变交换值：

a:hover {
  background-size: 0 3px, 100% 3px;
}

最后，发生悬停时的一点过渡：

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
}

六、通过下划线链接悬停效果

背景颜色从链接后面的左侧进入，然后在鼠标移出时从右侧退出。

我的版本减少了背景，所以它更像是一个下划线。

a {
  position: relative;
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: #18272F;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

以上所有代码我们都打包好了，链接如下：

不断增长的背景链接悬停效果.html: https://url18.ctfile.com/f/7715018-667149945-f50310?p=6511 (访问密码: 6511)

彩虹下划线链接悬停效果.html: https://url18.ctfile.com/f/7715018-667149946-f2bb2b?p=6511 (访问密码: 6511)

从右到左的颜色交换链接悬停效果.html: https://url18.ctfile.com/f/7715018-667149947-c11faf?p=6511 (访问密码: 6511)

滑动高亮链接悬停效果.html: https://url18.ctfile.com/f/7715018-667149948-918a39?p=6511 (访问密码: 6511)

通过下划线链接悬停效果.html: https://url18.ctfile.com/f/7715018-667149949-d11351?p=6511 (访问密码: 6511)

文本交换链接悬停效果.html: https://url18.ctfile.com/f/7715018-667149950-e46f3d?p=6511 (访问密码: 6511)