探索内联链接的创意 CSS 悬停效果

在本教程中，我们将讨论 css 悬停效果。而且不仅仅是任何悬停效果！我们将为我们多年来一直使用的标准内联链接效果创建一些更有趣的替代方案。

创意链接悬停演示

我创建了一个快速演示来展示所有这些链接效果；一系列使用 CSS Grid 排列的列表项，在每个列表项中我将放置一个可以设置样式的内联链接。看看每一个，随意分叉演示，看看你能用它们做什么！

See the Pen  Exploring Creative Link Hover Effects by Envato Tuts+ (@tutsplus)  on CodePen.

全局样式

对于所有这些演示，我首先为a元素设置了一些全局样式和变量：

/* Variables */

:root {

  --link-1: #D65472;

  --link-2: #37C5F0;

  --link-3: gold;

  --text: #18272F;

  --counter: #30B67D;

}

 

/* Reset */

a {

    text-decoration: none;

    color: var(--text);

    font-weight: 700;

    vertical-align: top;

}

我为每个链接添加了一个ID，以便我可以轻松地定位它们。

悬停效果一：背景框阴影

此效果将在内联链接上滑动背景框阴影，同时更改链接文本的颜色。

• 我们首先在链接周围添加一些填充，然后为了防止填充扰乱文本流，我们添加了相同值的负边距。

• 而不是使用background我们使用的属性，box-shadow 因为我们可以转换它。

#style-1 {

  padding: 0 0.25rem;

  margin: 0 -0.25rem;

  box-shadow: inset 0 0 0 0 var(--link-1);

  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

  color: var(--link-1);

}

#style-1:hover {

  color: white;

  box-shadow: inset 100px 0 0 0 var(--link-1);

}

悬停效果 2：动画下划线

我们的第二个效果添加了一个下划线，但它从文本的中间向外动画，以获得一些额外的活力。

• 首先要做的是给锚一个位置：relative; 因为我们将使用我们想要定位的伪元素。

• 我们使用我们定位的 ::before 伪元素top: 100%;使其位于链接的底部。

• 我们使用transform: scaleX();andtransition为伪元素设置动画。

• 我们transition也是链接的颜色，以匹配下划线动画。

#style-2 {

  position: relative;

  transition: color 0.3s ease-in-out;

}

#style-2::before {

  content: "";

  position: absolute;

  top: 100%;

  width: 100%;

  height: 3px;

  background-color: var(--link-1);

  transform: scaleX(0);

  transition: transform 0.3s ease-in-out;

}

#style-2:hover {

  color: var(--link-1);

}

#style-2:hover::before {

  transform: scaleX(1);

}

悬停效果3：通过下划线

当您将鼠标悬停在此链接上时，您会看到下划线从左侧开始动画，然后消失在右侧。

• 我们再次position: relative;从父元素开始，因为我们将使用伪元素。

• 我们::before使用一些基本规则来设计样式，包括border-radius: 4px;只是为了让它看起来更柔和一些。

• 我们将使用与上一个演示 ( ) 相同的过渡变换思想，transform: scaleX(0);但我们将更改变换原点。

• 所以我们从设置元素transform-origin: right;开始。::before

• 然后就:hover我们使用了transform-origin: left;。

#style-3 {

  position: relative;

}

#style-3::before {

  content: "";

  position: absolute;

  width: 100%;

  height: 4px;

  border-radius: 4px;

  background-color: var(--text);

  bottom: 0;

  left: 0;

  transform-origin: right;

  transform: scaleX(0);

  transition: transform 0.3s ease-in-out;

}

#style-3:hover::before {

  transform-origin: left;

  transform: scaleX(1);

}

悬停效果4：文本替换

这种悬停效果是最复杂的，也是我们将为其更改标记的第一个效果。我们将用我们存储在链接中的任何内容替换data-attribute链接文本。

• position: relative;从父级的通常样式开始。

• 定义::before和::after伪元素的基本样式。

• 我们的::before元素将是下划线。

• 该::after元素将保存我们在data-replace=""属性中设置的文本（它将与链接文本匹配）。我们用content: attr(data-replace);.

• 我们::after通过使用将元素向右推transform: translate3d();（利用硬件加速）。

• 我们还需要使其不可见，我们在父级上使用overflow: hidden;组合。display: inline-block;

• :hover我们将::after元素移回原位。

• 我们将文本链接包装在一个<span>元素中，然后当元素过渡到时，我们从链接中过渡出来，反之亦然。::after

#style-4 {

  overflow: hidden;

  position: relative;

  display: inline-block;

}

#style-4::before, #style-4::after {

  content: "";

  position: absolute;

  width: 100%;

  left: 0;

}

#style-4::before {

  background-color: var(--link-1);

  height: 2px;

  bottom: 0;

  transform-origin: 100% 50%;

  transform: scaleX(0);

  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);

}

#style-4:hover::before {

  transform-origin: 0% 50%;

  transform: scaleX(1);

}

#style-4::after {

  content: attr(data-replace);

  height: 100%;

  top: 0;

  transform-origin: 100% 50%;

  transform: translate3d(200%, 0, 0);

  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);

  color: var(--link-1);

}

#style-4:hover::after {

  transform: translate3d(0, 0, 0);

}

#style-4 span {

  display: inline-block;

  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);

}

#style-4:hover span {

  transform: translate3d(-200%, 0, 0);

}

悬停效果 5：多个属性

让我们再把事情简单一点。此示例使用了一些不同的属性来提供不断增长的偏移背景效果。

• 从我们需要操作伪元素的常用设置样式开始。

• 设置 az-index: -1;以发送链接文本后面的块。

• 通过使用负边距偏移::before悬停元素，并将宽度表示为calc(100% + 10px);

#style-5 {

  position: relative;

  font-weight: bold;

}

#style-5::before {

  content: "";

  background-color: var(--link-3);

  position: absolute;

  left: 0.5rem;

  bottom: 5px;

  width: 100%;

  height: 8px;

  z-index: -1;

  transition: all 0.3s ease-in-out;

}

#style-5:hover::before {

  left: -5px;

  bottom: 0;

  height: 100%;

  width: calc(100% + 10px);

}

悬停效果6：多线渐变

到目前为止，当内联链接位于一行时效果很好，但是如果链接分布在多行上怎么办？让我们玩一个在该场景中有效的效果。

• 使用长链接以最好地查看此链接的效果。

• 我们为底部边框应用背景渐变。

• 它看起来像这样：background-image: linear-gradient(white 50%, var(--link-2) 50%);并为我们提供了一个半白半蓝的背景。

• 然后我们使用 abackground-size: auto 175%;将背景渐变垂直缩放 175%。这有效地放大了与顶部边缘对齐的整个背景，在此过程中裁剪了大部分蓝色。通过这种方式，我们创建了我们的下划线。

• 在悬停时，我们定位背景，使其与链接底部对齐。

#style-6 {

  background-image: linear-gradient(white 50%, var(--link-2) 50%);

  background-size: auto 175%;

  transition: background 0.3s ease-in-out;

}

#style-6:hover {

  background-position-y: 100%;

}

结论

没有什么比一个好的实用教程更好的了，嗯？我希望您喜欢创建这些链接效果，并随着您的进步而发展您的技能。不要忘记您可以观看页面顶部的视频，以更直观地了解这些悬停效果。