如何从零开始创建9种不同的 CSS 悬停效果

在这个更新的教程中，我们将创建七种不同的 css 悬停效果和另外两种需要一点 javascript 的效果。

我们将一路学习负载，包括如何为字体图标、边框、svg 路径设置动画，以及如何使用 Lottie 动画。您将能够将这些悬停效果应用于各种情况。让我们潜入吧！

只是为了让您了解在本教程中将学到什么，请查看我们将构建的演示之一：

See the Pen  Exploring Hover Effects With Font Awesome Icons by Envato Tuts+ (@tutsplus)  on CodePen.

让我们从这个开始，我们第一步见……

1.显示图标 CSS 悬停效果

在第一个示例中，我们将探索您已经看过的演示：悬停效果，其中文本被替换为带有幻灯片动画的图标。

从页面标记开始

我们将从一个代表典型页面菜单的普通无序列表开始。每个菜单链接将包含两个span 元素。第一个span将包含锚文本，而第二个将包含一个 font Awesome 图标：

<ul class="menu">

  <li>

    <a href="#0">

      <span>About</span>

      <span>

        <i class="fas fa-address-card" aria-hidden="true"></i>

      </span>

    </a>

  </li>

  <li>

    <a href="#0">

      <span>Projects</span>

      <span>

        <i class="fas fa-tasks" aria-hidden="true"></i>   

      </span>

    </a>

  </li>

  ...

</ul>

指定样式

该列表将是一个内容水平居中的 flex 容器：

注意：这个基础样式会添加到我们构建的所有demo中，不再讨论。该演示还具有一些我们每次都会重复使用的美学风格（例如深色背景等），您可以从 CodePen 演示中复制这些风格。

每个项目中的第span 一个将在其周围有一些填充：

然后第二个span 将默认绝对定位和隐藏。另外，它的图标将水平和垂直居中：

.menu a {

  display: block;

  position: relative;

  overflow: hidden;

}

 

.menu a span:last-child {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  transform: translateY(-100%);

}

每次我们将鼠标悬停在链接上时，其文本都会消失。另一方面，此时，关联的图标将变得可见：

.menu a span {

  transition: transform 0.2s ease-out;

}

.menu a:hover span:first-child {

  transform: translateY(100%);

}

.menu a:hover span:last-child {

  transform: none;

}

令人高兴的是，可以根据我们的需要修改幻灯片动画的方向。默认情况下，在悬停动画期间，图标会从上到下出现，而文字会移动到底部。要改变这种行为，我们必须将data-animation属性传递给目标列表。可能的值为to-top、to-right和to-left。

对应的样式如下图：

.menu[data-animation="to-top"] a span:last-child {

  transform: translateY(100%);

}

 

.menu[data-animation="to-top"] a:hover span:first-child {

  transform: translateY(-100%);

}

 

.menu[data-animation="to-right"] a span:last-child {

  transform: translateX(-100%);

}

 

.menu[data-animation="to-right"] a:hover span:first-child {

  transform: translateX(100%);

}

 

.menu[data-animation="to-left"] a span:last-child {

  transform: translateX(100%);

}

 

.menu[data-animation="to-left"] a:hover span:first-child {

  transform: translateX(-100%);

}

这是总结上述案例的完整 CodePen 演示：

See the Pen  Exploring Hover Effects With Font Awesome Icons by Envato Tuts+ (@tutsplus)  on CodePen.

2. 揭示滑动 CSS 悬停效果

在第二个示例中，我们将继续使用另一个悬停效果，其中文本被 Font Awesome 图标替换。但是，这一次，由于发生在前台的“滑动”，替换将发生在后台并且对我们不可见。

指定页面标记

与以往一样，我们将从包含页面链接的无序列表开始。但是，在这种情况下，我们的每个链接都将具有一个data-icon属性。此属性的值将匹配Font Awesome 图标的Unicode 表示：

<ul class="menu">

  <li>

    <a href="#0" data-icon="&#xf2bb;">

      About

    </a>

  </li>

  <li>

    <a href="#0" data-icon="&#xf0ae;">

      Projects

    </a>

  </li>

  ...

</ul>

指定样式

然后我们将定义所有链接的 ::before 和::after伪元素。 

• 伪元素将::before位于链接的中心，尽管它最初是不可见的。 

• 伪元素将::after覆盖整个链接维度，但默认情况下它也会隐藏。它的内容将包含一个 Font Awesome 图标，存储在相关data-icon 属性中：

:root {

  ...

  --text-color: #aaaebc;

  --timing-function: cubic-bezier(0.82, 0.2, 0.42, 1);

}

 

.menu a {

  position: relative;

  overflow: hidden;

}

 

.menu a::before,

.menu a::after {

  position: absolute;

  left: 0;

  width: 100%;

}

 

.menu a::before {

  content: "";

  top: 50%;

  transform: translate(-101%, -50%);

  height: 50%;

  z-index: 1;

  background: var(--text-color);

}

 

.menu a::after {

  content: attr(data-icon);

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  top: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%;

  color: var(--text-color);

  opacity: 0;

}

• 每次我们将鼠标悬停在链接上时，首先::before伪元素会很快出现。然后，它将向右移动并出现图标。在此期间，锚文本颜色将设置为透明。 

为了实现这种精确的时间同步，我们必须自定义转换的速度。例如，我们将为链接及其::after伪元素添加延迟：

/*CUSTOM VARIABLES HERE*/

 

.menu a {

  transition: color 0s 0.25s var(--timing-function);

}

 

.menu a::before {

  transition: transform 0.5s var(--timing-function);

}

 

.menu a::after {

  transition: opacity 0s 0.25s var(--timing-function);

}

 

.menu a:hover {

  color: transparent;

}

 

.menu a:hover::before {

  transform: translate(101%, -50%);

}

 

.menu a:hover::after {

  opacity: 1;

}

如果您更喜欢反转动画，只需将data-animation="to-left"属性添加到相应的列表中即可。

这是涵盖这两种情况的 CodePen 演示：

See the Pen  Exploring Hover Effects With Font Awesome Icons ii by Envato Tuts+ (@tutsplus)  on CodePen.

3.动画下划线CSS悬停效果

在我们的第三个示例中，我们将查看一个常见的悬停效果，其中下划线通过幻灯片动画显示。

指定页面标记

我们将从一个存储页面链接的无序列表开始：

<ul class="menu">

  <li>

    <a href="#0">

      About

    </a>

  </li>

  <li>

    <a href="#0">

      Projects

    </a>

  </li>

  ...

</ul>

指定样式

然后我们将为::before所有链接定义伪元素。我们将把它放在它的容器底部并给它translate: scaleX(0)，所以它最初会被隐藏。 

另外，我们将应用 transform-origin: left 它，因为我们希望动画从左到右开始：

.menu a {

  position: relative;

}

 

.menu a::before {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 2px;

  background: linear-gradient(to right, #b47dcd, #e878a2, #eb85ab);

  z-index: 1;

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.5s ease-in-out;

}

每次我们将鼠标悬停在链接上时，它的伪元素都会出现：

.menu a:hover::before {

  transform: scaleX(1);

}

与前面的示例类似，我们可以选择更改幻灯片动画的方向。默认情况下，该行将从左到右显示，但要更改该行为，我们必须将data-animation 属性传递给目标列表。可能的值为to-left 和center。

对应的样式如下：

.menu[data-animation="to-left"] a::before {

  transform-origin: right;

}

 

.menu[data-animation="center"] a::before {

  transform-origin: center;

}

奖金！

我们可以更进一步，transform-origin根据其状态更改伪元素的属性值。这使得下划线从一侧出现，而从另一侧消失。

以下是实现此功能的规则：

.menu[data-animation="bonus"] a::before {

  transform-origin: right;

  transition: transform 0.5s ease-in-out;

}

 

.menu[data-animation="bonus"] a:hover::before {

  transform-origin: left;

  transform: scaleX(1);

  transition-timing-function: cubic-bezier(0.2, 1, 0.82, 0.94);

}

这是我们讨论的场景的 CodePen 演示：

See the Pen  Exploring Hover Effects With Line Animation by Envato Tuts+ (@tutsplus)  on CodePen.

4.多行动画CSS悬停效果

继续前进，在第四个示例中，我们将介绍悬停效果，其中多行将按顺序显示。这种技术的美妙之处在于它会给我们一种印象，即悬停元素的边框正在被绘制。多么酷啊！

注意：这个效果也可以用 SVG 来实现，我们会在后面的演示中看到类似的东西。

指定页面标记

同样，我们的标记将由一个无序列表组成。每个菜单链接将包含四个空span 元素：

<ul class="menu">

  <li>

    <a href="#0">

      About

      <span class="border border-top"></span>

      <span class="border border-right"></span>

      <span class="border border-bottom"></span>

      <span class="border border-left"></span>

    </a>

  </li>

  ...

</ul>

指定样式

默认情况下，span 元素将被绝对定位和隐藏。但是，它们position和transform-origin会有所不同：

.menu .border {

  position: absolute;

  left: 0;

  background: currentColor;

}

 

.menu .border-top,

.menu .border-bottom {

  width: 100%;

  height: 1px;

  transform: scaleX(0);

}

 

.menu .border-left,

.menu .border-right {

  width: 1px;

  height: 100%;

  transform: scaleY(0);

}

 

.menu .border-top,

.menu .border-left,

.menu .border-right {

  top: 0;

}

 

.menu .border-bottom {

  bottom: 0;

  transform-origin: bottom right;

}

 

.menu .border-top {

  transform-origin: top left;

}

 

.menu .border-left {

  transform-origin: bottom left;

}

 

.menu .border-right {

  left: auto;

  right: 0;

  transform-origin: top right;

}

当我们将鼠标悬停在一个链接上时，它span的 s 将按照顺时针方向依次变为可见。为此，我们将控制第二个、第三个和第四个spans 何时可见：

:root {

  ...

  --transition-duration: 0.2s;

  --transition-delay: 0.2s;

}

 

.menu .border {

  transition: transform var(--transition-duration) ease-in-out;

}

 

.menu a:hover .border-top,

.menu a:hover .border-bottom {

  transform: scaleX(1);

}

 

.menu a:hover .border-left,

.menu a:hover .border-right {

  transform: scaleY(1);

}

 

.menu a:hover .border-right {

  transition-delay: var(--transition-delay);

}

 

.menu a:hover .border-bottom {

  transition-delay: calc(var(--transition-delay) * 2);

}

 

.menu a:hover .border-left {

  transition-delay: calc(var(--transition-delay) * 3);

}

通过修改transform-origin属性值并取消元素的延迟，我们可以轻松生成另一个漂亮的效果。

要将这种效果合并到我们的菜单中，我们必须将 data-animation="diagonal"属性附加到它。这将产生以下 CSS 样式：

.menu[data-animation="diagonal"] .border-left {

  transform-origin: top left;

}

 

.menu[data-animation="diagonal"] .border-right,

.menu[data-animation="diagonal"] .border-bottom {

  transform-origin: bottom right;

}

 

.menu[data-animation="diagonal"] a:hover [class^=border]{

  transition-delay: 0s;

}

看看 CodePen 演示，它为我们提供了这些效果：

See the Pen  Exploring Hover Effects With Multi Line Animation by Envato Tuts+ (@tutsplus)  on CodePen.

5. 动画圆SVG悬停效果

在第五个示例中，我们将通过一个悬停效果，其中 SVG 路径是动画的，环绕我们的链接。我们将要使用的技术并不是什么新鲜事物。事实上，Jake Archibald几年前就写过它。

指定页面标记

再一次，我们将从一个无序列表开始，但这次我们将在每个链接中包含一个嵌套的 SVG：

<ul class="menu">

  <li>

    <a href="#0">

      About

      <svg preserveAspectRatio="none" viewBox="0 0 546.714 178.143"><path d="M546.214 89.072c0 48.917-122.162 88.571-272.857 88.571C122.662 177.643.5 137.988.5 89.072.5 40.155 122.662.5 273.357.5c150.695 0 272.857 39.655 272.857 88.572z"/></svg>

    </a>

  </li>

  ...

</ul>

SVG 将是一个椭圆并通过path元素表示。我们将给出它，preserveAspectRatio="none"因为正如我们稍后将看到的，它应该覆盖整个父维度，即使它被拉伸。

指定样式

SVG 将在其容器内绝对定位和居中。另外，如上所述，它将足以覆盖锚文本：

.menu a {

  position: relative;

}

 

.menu a svg {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 120%;

  height: 120%;

  z-index: -1;

}

该path元素将有一个笔触，其填充颜色将是透明的：

.menu a svg path {

  fill: transparent;

  stroke-width: 5px;

  stroke: currentColor;

}

要为路径设置动画，我们需要两个额外的属性。具体来说，stroke-dasharray和stroke-dashoffset属性。 

该stroke-dasharray属性负责在我们的笔划中创建破折号/间隙。例如，通过设置stroke-dasharray: 50路径，它将如下所示：

该stroke-dashoffset属性负责更改这些破折号的位置（偏移）。

所以这里的诀窍是：

• 首先， stroke-dasharray属性的值应该与路径的长度相匹配。JavaScript 提供了一种方便的方法来通过该方法获取它，而不是猜测它getTotalLength() 。 

• 接下来，我们还将结果值（或反向效果的负值）分配给stroke-dashoffset属性。这种巧妙的组合将隐藏 SVG。 

• 然后，每次我们将鼠标悬停在链接上时，我们都会运行一个动画，将stroke-dashoffset属性值移动到 0。结果，路径将逐渐“绘制”。

考虑到以上所有内容，让我们首先通过 javaScript 检索路径的长度（仅针对第一个路径）：

document.queryselector("li:nth-child(1) path").getTotalLength();

//1210.709716796875;

// you might see slightly different values depending on your browser

然后，我们将此值分配给相应的属性：

.menu a svg path {

  stroke-dasharray: 1210.709716796875;

  stroke-dashoffset: -1210.709716796875; /*or the positive one*/

  transition: stroke-dashoffset .5s cubic-bezier(.29,.68,.74,1.02);

}

 

.menu a:hover svg path {

  stroke-dashoffset: 0;

}

最后，作为一项改进，我们可以通过 JavaScript 动态指定它们，而不是硬编码stroke-dasharray和stroke-dashoffset值（看看你是否可以自己做这点！）。

这是最终的演示，它为我们提供了一个很酷的黑板悬停效果：

See the Pen  Exploring Hover Effects With SVG Animation by Envato Tuts+ (@tutsplus)  on CodePen.

6.  SVG 波浪下划线悬停效果

现在我们知道了 SVG 路径动画背后的基本原理，让我们快速看一下另外两个非常相似的例子。在这两个示例中，都不需要拉伸 SVG，因此我们不会使用该 preserveAspectRatio="none" 属性。

第一个将显示波浪形下划线。

这是演示：

See the Pen  Exploring Hover Effects With SVG Animation ii by Envato Tuts+ (@tutsplus)  on CodePen.

7. 指向SVG箭头悬停效果

第三个 SVG 演示将显示一个Iconmonstr图标（一个指向箭头）。 

这是您进行逆向工程的演示：

See the Pen  Exploring Hover Effects With SVG Animation iii by Envato Tuts+ (@tutsplus)  on CodePen.

8. Lottie 动画悬停效果

在这第八个示例中，我们将介绍无限播放 Lottie 动画的悬停效果。如果您不熟悉此概念，请花一些时间阅读本教程，然后再继续。

对于这个需要一些 JavaScript的演示，我们将使用从LottieFiles 库中获取的免费Lottie 动画，并使用LottieFiles 网络播放器。如果您以前没有使用过此播放器，请不要担心。还有一个专门的教程描述了将其合并到项目中所需的所有步骤。请务必先阅读它，然后再回来。

指定页面标记

我们将从通常的无序列表开始。每个菜单链接都将包含相同的lottie-player自定义元素：

<ul class="menu">

  <li>

    <a href="#0">

      About

      <lottie-player src="https://assets8.lottiefiles.com/datafiles/B1zOc97lUJINcA2/data.json" style="width: 140px; height: 140px;" loop></lottie-player>

    </a>

  </li>

  <li>

    <a href="#0">

      Projects

      <lottie-player src="https://assets8.lottiefiles.com/datafiles/B1zOc97lUJINcA2/data.json" style="width: 140px; height: 140px;" loop></lottie-player>

    </a>

  </li>

  <li>

    <a href="#0">

      Clients

      <lottie-player src="https://assets8.lottiefiles.com/datafiles/B1zOc97lUJINcA2/data.json" style="width: 140px; height: 140px;" loop></lottie-player>

    </a>

  </li>

  <li>

    <a href="#0">

      Contact

      <lottie-player src="https://assets8.lottiefiles.com/datafiles/B1zOc97lUJINcA2/data.json" style="width: 140px; height: 140px;" loop></lottie-player>

    </a>

  </li>

</ul>

请注意，我们为该元素指定了固定尺寸（140 像素 x 140 像素）。根据您的需要随意将其放大或缩小。

指定样式

将lottie-player在其容器内绝对定位和居中。另外，默认情况下它将被隐藏：

.menu a {

  position: relative;

}

 

.menu a lottie-player {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  visibility: hidden;

}

 

.menu a lottie-player.visible {

  visibility: visible;

}

添加 JavaScript

每次我们将鼠标悬停在一个链接上时，它的相关动画都会出现，这要归功于visible类和播放：

const links = document.querySelectorAll(".menu a");

const visibleClass = "visible";

 

links.forEach((link) => {

  link.addeventListener("mouseenter", function () {

    const player = this.querySelector("lottie-player");

    player.classList.add(visibleClass);

    player.play();

  });

 

  link.addEventListener("mouseleave", function () {

    const player = this.querySelector("lottie-player");

    player.classList.remove(visibleClass);

    player.stop();

  });

});

这是相关的演示：

See the Pen  Exploring Hover Effects With Lottie Animation by Envato Tuts+ (@tutsplus)  on CodePen.

9.具有随机颜色悬停效果的 Lottie 动画

在最后一个示例中，我们将继续探索 Lottie 动画世界。不过这一次，在悬停效果期间，有些事情会发生变化。也就是说，动画会出现，但也会收到来自颜色数组的随机颜色。

同样，对于这个需要一些 JavaScript的演示，我们将使用  从 LottieFiles 库中获取的免费Lottie 动画并使用 LottieFiles 网络播放器。

指定页面标记

再一次，我们将从通常的无序列表和lottie-player 每个链接中的相同自定义元素开始：

<ul class="menu">

  <li>

    <a href="#0">

      About

      <lottie-player preserveAspectRatio="none" src="https://assets4.lottiefiles.com/packages/lf20_1wDQvS.json" loop></lottie-player>

    </a>

  </li>

  <li>

    <a href="#0">

      Projects

      <lottie-player preserveAspectRatio="none" src="https://assets4.lottiefiles.com/packages/lf20_1wDQvS.json" loop></lottie-player>

    </a>

  </li>

  <li>

    <a href="#0">

      Clients

      <lottie-player preserveAspectRatio="none" src="https://assets4.lottiefiles.com/packages/lf20_1wDQvS.json" loop></lottie-player>

    </a>

  </li>

  <li>

    <a href="#0">

      Contact

      <lottie-player preserveAspectRatio="none" src="https://assets4.lottiefiles.com/packages/lf20_1wDQvS.json" loop></lottie-player>

    </a>

  </li>

</ul>

但是，这一次我们的动画将不包含固定尺寸。它应该覆盖整个父尺寸，即使它被拉伸。这就是我们赋予 preserveAspectRatio="none"自定义元素的原因。 

指定样式

默认情况下 lottie-player 将绝对定位和隐藏：

.menu a {

  position: relative;

}

 

.menu a lottie-player {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  visibility: hidden;

}

 

.menu a lottie-player.visible {

  visibility: visible;

}

添加 JavaScript

每次我们将鼠标悬停在一个链接上时，它的相关动画都会出现，这要归功于 visible类和播放。此外，动画将从arrayOfColors数组中接收随机颜色选择：

const links = document.querySelectorAll(".menu a");

const visibleClass = "visible";

const arrayOfColors = [

  "chartreuse",

  "gold",

  "forestgreen",

  "crimson",

  "tomato",

  "wheat",

  "pink",

  "yellow",

  "ivory",

  "bisque",

  "snow",

  "lightcyan",

  "lightyellow",

  "linen",

  "mintcream",

  "pink"

];

 

function getRandomColor() {

  const arrayLength = arrayOfColors.length;

  const randomValue = Math.random() * arrayLength;

  const roundedNumber = Math.floor(randomValue);

  const color = arrayOfColors[roundedNumber];

  return color;

}

 

links.forEach((link) => {

  link.addEventListener("mouseenter", function (e) {

    const player = this.querySelector("lottie-player");

    player.shadowRoot.querySelector("path").style.fill = getRandomColor();

    player.classList.add(visibleClass);

    player.play();

  });

 

  link.addEventListener("mouseleave", function () {

    const player = this.querySelector("lottie-player");

    player.classList.remove(visibleClass);

    player.stop();

  });

});

提示：请记住，这lottie-player是一个自定义元素。要改变它的颜色，我们必须修改它的元素的fill值。path但是，我们不能使用 JavaScript 的标准遍历方法直接定位这个元素。为了获得这种能力，我们首先必须通过使用ShadowRoot界面，更具体地说是它的shadowRoot属性来定位播放器的内容。 

这是相关的演示：

See the Pen  Exploring Hover Effects With Lottie Animation ii by Envato Tuts+ (@tutsplus)  on CodePen.

结论

伙计们，另一个教程到此结束！这是一段漫长的旅程，但我希望你喜欢它并学到了一些新东西，你将把它们包含在你的前端工具包中。