在这个更新的教程中，我们将创建十种不同的 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 图标：
1 <ul class="menu"> 2 <li> 3 <a href="#0"> 4 <span>About</span> 5 <span> 6 <i class="fas fa-address-card" aria-hidden="true"></i> 7 </span> 8 </a> 9 </li> 10 <li> 11 <a href="#0"> 12 <span>Projects</span> 13 <span> 14 <i class="fas fa-tasks" aria-hidden="true"></i> 15 </span> 16 </a> 17 </li> 18 ... 19 </ul>
指定样式
该列表将是一个内容水平居中的弹性容器：
1 .menu {
2 display: flex;
3 justify-content: center;
4 }我们会在几乎所有的demo中添加这个基础样式，所以我们不再讨论它。该演示还有一些我们每次都会重复使用的美学风格（例如深色背景等），您可以从 CodePen 演示中复制它们。
每个项目中的第一个span 都会有一些填充：
1 .menu a span:first-child {
2 display: inline-block;
3 padding: 10px;
4 }然后第二个span 将被绝对定位并默认隐藏。另外，它的图标将水平和垂直居中：
1 .menu a {
2 display: block;
3 position: relative;
4 overflow: hidden;
5 }
6
7 .menu a span:last-child {
8 position: absolute;
9 top: 0;
10 right: 0;
11 bottom: 0;
12 left: 0;
13 display: flex;
14 align-items: center;
15 justify-content: center;
16 transform: translateY(-100%);
17 }每次我们将鼠标悬停在一个链接上时，它的文本就会消失。另一方面，此时相关的图标将变为可见：
1 .menu a span {
2 transition: transform 0.2s ease-out;
3 }
4
5 .menu a:hover span:first-child {
6 transform: translateY(100%);
7 }
8
9 .menu a:hover span:last-child {
10 transform: none;
11 }幸运的是，有选项可以根据我们的需要修改幻灯片动画的方向。默认情况下，在悬停动画期间，图标将从上到下出现，而文本将移动到底部。要更改该行为，我们必须将data-animation属性传递给目标列表。可能的值为to-top、to-right和to-left。
对应的样式如下图：
1 .menu[data-animation="to-top"] a span:last-child {
2 transform: translateY(100%);
3 }
4
5 .menu[data-animation="to-top"] a:hover span:first-child {
6 transform: translateY(-100%);
7 }
8
9 .menu[data-animation="to-right"] a span:last-child {
10 transform: translateX(-100%);
11 }
12
13 .menu[data-animation="to-right"] a:hover span:first-child {
14 transform: translateX(100%);
15 }
16
17 .menu[data-animation="to-left"] a span:last-child {
18 transform: translateX(100%);
19 }
20
21 .menu[data-animation="to-left"] a:hover span:first-child {
22 transform: translateX(-100%);
23 }这是总结上述案例的完整 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 表示：
1 <ul class="menu"> 2 <li> 3 <a href="#0" data-icon=""> 4 About 5 </a> 6 </li> 7 <li> 8 <a href="#0" data-icon=""> 9 Projects 10 </a> 11 </li> 12 ... 13 </ul>
指定样式
然后我们将定义 所有链接的::before 和::after伪元素。
伪元素::before将位于链接的中心，尽管它最初是不可见的。
伪::after元素将覆盖完整的链接维度，但默认情况下也会隐藏。它的内容将包含存储在相关属性中的 Font Awesome 图标data-icon ：
1 :root {
2 ...
3 --text-color: #aaaebc;
4 --timing-function: cubic-bezier(0.82, 0.2, 0.42, 1);
5 }
6
7 .menu a {
8 position: relative;
9 overflow: hidden;
10 }
11
12 .menu a::before,
13 .menu a::after {
14 position: absolute;
15 left: 0;
16 width: 100%;
17 }
18
19 .menu a::before {
20 content: "";
21 top: 50%;
22 transform: translate(-101%, -50%);
23 height: 50%;
24 z-index: 1;
25 background: var(--text-color);
26 }
27
28 .menu a::after {
29 content: attr(data-icon);
30 font-family: "Font Awesome 5 Free";
31 font-weight: 900;
32 top: 0;
33 display: flex;
34 align-items: center;
35 justify-content: center;
36 height: 100%;
37 color: var(--text-color);
38 opacity: 0;
39 }每次我们将鼠标悬停在链接上时，首先::before会快速出现伪元素。然后，它将向右移动并出现图标。在此期间，锚文本颜色将设置为透明。
为了实现这种精确的时间同步，我们必须自定义转换的速度。例如，我们将向链接及其::after伪元素添加延迟：
1 /*CUSTOM VARIABLES HERE*/
2
3 .menu a {
4 transition: color 0s 0.25s var(--timing-function);
5 }
6
7 .menu a::before {
8 transition: transform 0.5s var(--timing-function);
9 }
10
11 .menu a::after {
12 transition: opacity 0s 0.25s var(--timing-function);
13 }
14
15 .menu a:hover {
16 color: transparent;
17 }
18
19 .menu a:hover::before {
20 transform: translate(101%, -50%);
21 }
22
23 .menu a:hover::after {
24 opacity: 1;
25 }如果您更喜欢反转动画，只需将data-animation="to-left"属性添加到相应的列表即可。
这是涵盖这两种情况的 CodePen 演示：
See the Pen Exploring Hover Effects With Font Awesome Icons ii by Envato Tuts+ (@tutsplus) on CodePen.
3.动画下划线CSS悬停效果
在我们的第三个示例中，我们将查看一个常见的悬停效果，其中下划线与幻灯片动画一起显示。
指定页面标记
我们将从存储页面链接的无序列表开始：
1 <ul class="menu"> 2 <li> 3 <a href="#0"> 4 About 5 </a> 6 </li> 7 <li> 8 <a href="#0"> 9 Projects 10 </a> 11 </li> 12 ... 13 </ul>
指定样式
::before然后我们将为所有链接定义伪元素。我们将把它放在容器的底部并给它translate: scaleX(0)，所以它最初会被隐藏。
此外，我们将应用 transform-origin: left 它，因为我们希望动画从左到右开始：
1 .menu a {
2 position: relative;
3 }
4
5 .menu a::before {
6 content: "";
7 position: absolute;
8 bottom: 0;
9 left: 0;
10 width: 100%;
11 height: 2px;
12 background: linear-gradient(to right, #b47dcd, #e878a2, #eb85ab);
13 z-index: 1;
14 transform: scaleX(0);
15 transform-origin: left;
16 transition: transform 0.5s ease-in-out;
17 }每次我们将鼠标悬停在一个链接上时，它的伪元素就会出现：
1 .menu a:hover::before {
2 transform: scaleX(1);
3 }与前面的示例类似，我们可以选择更改幻灯片动画的方向。默认情况下，该行将从左到右显示，但要更改该行为，我们必须将属性传递data-animation 给目标列表。可能的值为to-left 和center。
对应的样式如下：
1 .menu[data-animation="to-left"] a::before {
2 transform-origin: right;
3 }
4
5 .menu[data-animation="center"] a::before {
6 transform-origin: center;
7 }奖金！
我们可以更进一步，transform-origin根据伪元素的状态更改伪元素的属性值。这使得下划线从一侧出现，而从另一侧消失。
以下是实现此功能的规则：
1 .menu[data-animation="bonus"] a::before {
2 transform-origin: right;
3 transition: transform 0.5s ease-in-out;
4 }
5
6 .menu[data-animation="bonus"] a:hover::before {
7 transform-origin: left;
8 transform: scaleX(1);
9 transition-timing-function: cubic-bezier(0.2, 1, 0.82, 0.94);
10 }这是我们讨论的场景的 CodePen 演示：
See the Pen Exploring Hover Effects With Line Animation by Envato Tuts+ (@tutsplus) on CodePen.
4.多行动画 CSS 悬停效果
继续，在这第四个示例中，我们将介绍悬停效果，其中多条线将按顺序显示。这种技术的美妙之处在于它会给我们一种印象，即悬停元素的边框正在被绘制。多么酷啊！
注意：这种效果也可以用 SVG 实现，我们将在后面的演示中看到类似的东西。
指定页面标记
同样，我们的标记将包含一个无序列表。每个菜单链接将包含四个空span 元素：
1 <ul class="menu"> 2 <li> 3 <a href="#0"> 4 About 5 <span class="border border-top"></span> 6 <span class="border border-right"></span> 7 <span class="border border-bottom"></span> 8 <span class="border border-left"></span> 9 </a> 10 </li> 11 ... 12 </ul>
指定样式
默认情况下，元素span 将绝对定位和隐藏。但是，它们的position和transform-origin将有所不同：
1 .menu .border {
2 position: absolute;
3 left: 0;
4 background: currentColor;
5 }
6
7 .menu .border-top,
8 .menu .border-bottom {
9 width: 100%;
10 height: 1px;
11 transform: scaleX(0);
12 }
13
14 .menu .border-left,
15 .menu .border-right {
16 width: 1px;
17 height: 100%;
18 transform: scaleY(0);
19 }
20
21 .menu .border-top,
22 .menu .border-left,
23 .menu .border-right {
24 top: 0;
25 }
26
27 .menu .border-bottom {
28 bottom: 0;
29 transform-origin: bottom right;
30 }
31
32 .menu .border-top {
33 transform-origin: top left;
34 }
35
36 .menu .border-left {
37 transform-origin: bottom left;
38 }
39
40 .menu .border-right {
41 left: auto;
42 right: 0;
43 transform-origin: top right;
44 }当我们将鼠标悬停在一个链接上时，它的spans 将顺时针旋转依次变为可见。为此，我们将控制第二个、第三个和第四个何时span可见：
1 :root {
2 ...
3 --transition-duration: 0.2s;
4 --transition-delay: 0.2s;
5 }
6
7 .menu .border {
8 transition: transform var(--transition-duration) ease-in-out;
9 }
10
11 .menu a:hover .border-top,
12 .menu a:hover .border-bottom {
13 transform: scaleX(1);
14 }
15
16 .menu a:hover .border-left,
17 .menu a:hover .border-right {
18 transform: scaleY(1);
19 }
20
21 .menu a:hover .border-right {
22 transition-delay: var(--transition-delay);
23 }
24
25 .menu a:hover .border-bottom {
26 transition-delay: calc(var(--transition-delay) * 2);
27 }
28
29 .menu a:hover .border-left {
30 transition-delay: calc(var(--transition-delay) * 3);
31 }通过修改transform-origin属性值并取消元素的延迟，我们可以轻松生成另一个不错的效果。
要将此效果合并到我们的菜单中，我们必须将 data-animation="diagonal"属性附加到它。这将导致以下 CSS 样式：
1 .menu[data-animation="diagonal"] .border-left {
2 transform-origin: top left;
3 }
4
5 .menu[data-animation="diagonal"] .border-right,
6 .menu[data-animation="diagonal"] .border-bottom {
7 transform-origin: bottom right;
8 }
9
10 .menu[data-animation="diagonal"] a:hover [class^=border]{
11 transition-delay: 0s;
12 }看看为我们提供这些效果的 CodePen 演示：
See the Pen Exploring Hover Effects With Multi Line Animation by Envato Tuts+ (@tutsplus) on CodePen.
5. 动画圆形 SVG 悬停效果
在这第五个示例中，我们将演示一个悬停效果，其中 SVG 路径是动画的，环绕着我们的链接。我们将要使用的技术并不是什么新东西；事实上，Jake Archibald几年前就写过这篇文章。
指定页面标记
同样，我们将从一个无序列表开始，但这次我们将在每个链接中包含一个嵌套的 SVG：
1 <ul class="menu"> 2 <li> 3 <a href="#0"> 4 About 5 <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> 6 </a> 7 </li> 8 ... 9 </ul>
SVG 将是一个椭圆并通过path元素表示。我们会给出它preserveAspectRatio="none"，因为我们稍后会看到，它应该覆盖整个父维度，即使它被拉伸了。
指定样式
SVG 将在其容器内绝对定位和居中。另外，如上所述，它的大小足以覆盖锚文本：
1 .menu a {
2 position: relative;
3 }
4
5 .menu a svg {
6 position: absolute;
7 top: 50%;
8 left: 50%;
9 transform: translate(-50%, -50%);
10 width: 120%;
11 height: 120%;
12 z-index: -1;
13 }该path元素将有一个描边，其填充颜色将是透明的：
1 .menu a svg path {
2 fill: transparent;
3 stroke-width: 5px;
4 stroke: currentColor;
5 }要为路径设置动画，我们需要两个额外的属性。具体来说，stroke-dasharray和stroke-dashoffset属性。
该stroke-dasharray属性负责在我们的笔划中创建破折号/间隙。例如，通过设置stroke-dasharray: 50路径，它将如下所示：
该stroke-dashoffset属性负责更改这些破折号的位置（偏移）。
所以这是诀窍：
首先，属性的值 stroke-dasharray应该与路径的长度相匹配。JavaScript 不是猜测它，而是提供了一种通过方法获取它的便捷方式getTotalLength() 。
接下来，我们还要将结果值（或它的负值以产生相反的效果）分配给该stroke-dashoffset属性。这种巧妙的组合将隐藏 SVG。
然后，每次我们将鼠标悬停在一个链接上时，我们将运行一个动画，将属性stroke-dashoffset值移动到 0。因此，路径将逐渐“绘制”。
考虑到以上所有内容，让我们首先通过 javaScript 检索路径的长度（仅针对第一条路径）：
1 document.queryselector("li:nth-child(1) path").getTotalLength(); 2 //1210.709716796875; 3 // you might see slightly different values depending on your browser
然后，我们将把这个值赋给相应的属性：
1 .menu a svg path {
2 stroke-dasharray: 1210.709716796875;
3 stroke-dashoffset: -1210.709716796875; /*or the positive one*/
4 transition: stroke-dashoffset .5s cubic-bezier(.29,.68,.74,1.02);
5 }
6
7 .menu a:hover svg path {
8 stroke-dashoffset: 0;
9 }最后，作为一种改进，我们可以通过 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自定义元素：
1 <ul class="menu"> 2 <li> 3 <a href="#0"> 4 About 5 <lottie-player src="https://assets8.lottiefiles.com/datafiles/B1zOc97lUJINcA2/data.json" style="width: 140px; height: 140px;" loop></lottie-player> 6 </a> 7 </li> 8 <li> 9 <a href="#0"> 10 Projects 11 <lottie-player src="https://assets8.lottiefiles.com/datafiles/B1zOc97lUJINcA2/data.json" style="width: 140px; height: 140px;" loop></lottie-player> 12 </a> 13 </li> 14 <li> 15 <a href="#0"> 16 Clients 17 <lottie-player src="https://assets8.lottiefiles.com/datafiles/B1zOc97lUJINcA2/data.json" style="width: 140px; height: 140px;" loop></lottie-player> 18 </a> 19 </li> 20 <li> 21 <a href="#0"> 22 Contact 23 <lottie-player src="https://assets8.lottiefiles.com/datafiles/B1zOc97lUJINcA2/data.json" style="width: 140px; height: 140px;" loop></lottie-player> 24 </a> 25 </li> 26 </ul>
请注意，我们为该元素指定了固定尺寸 (140px x 140px)。随意根据您的需要将其变大或变小。
指定样式
将lottie-player在其容器内绝对定位和居中。另外，它将默认隐藏：
1 .menu a {
2 position: relative;
3 }
4
5 .menu a lottie-player {
6 position: absolute;
7 top: 50%;
8 left: 50%;
9 transform: translate(-50%, -50%);
10 visibility: hidden;
11 }
12
13 .menu a lottie-player.visible {
14 visibility: visible;
15 }添加 JavaScript
每次我们将鼠标悬停在一个链接上时，由于visible类和播放，它的相关动画都会出现：
1 const links = document.querySelectorAll(".menu a"); 2 const visibleClass = "visible"; 3 4 links.forEach((link) => { 5 link.addeventListener("mouseenter", function () { 6 const player = this.querySelector("lottie-player"); 7 player.classList.add(visibleClass); 8 player.play(); 9 }); 10 11 link.addEventListener("mouseleave", function () { 12 const player = this.querySelector("lottie-player"); 13 player.classList.remove(visibleClass); 14 player.stop(); 15 }); 16 });
这是相关的演示：
See the Pen Exploring Hover Effects With Lottie Animation by Envato Tuts+ (@tutsplus) on CodePen.
9.具有随机颜色悬停效果的 Lottie 动画
在这第九个示例中，我们将继续探索 Lottie 动画世界。不过这一次，在悬停效果期间有些事情会发生变化。也就是说，动画会出现，但也会收到来自一组颜色的随机颜色。
同样，对于这个需要一些 JavaScript 的演示，我们将使用从 LottieFiles 库中获取的免费 Lottie 动画 ，并使用 LottieFiles 网络播放器。
指定页面标记
再一次，我们将从通常的无序列表和每个链接中的相同lottie-player 自定义元素开始：
1 <ul class="menu"> 2 <li> 3 <a href="#0"> 4 About 5 <lottie-player preserveAspectRatio="none" src="https://assets4.lottiefiles.com/packages/lf20_1wDQvS.json" loop></lottie-player> 6 </a> 7 </li> 8 <li> 9 <a href="#0"> 10 Projects 11 <lottie-player preserveAspectRatio="none" src="https://assets4.lottiefiles.com/packages/lf20_1wDQvS.json" loop></lottie-player> 12 </a> 13 </li> 14 <li> 15 <a href="#0"> 16 Clients 17 <lottie-player preserveAspectRatio="none" src="https://assets4.lottiefiles.com/packages/lf20_1wDQvS.json" loop></lottie-player> 18 </a> 19 </li> 20 <li> 21 <a href="#0"> 22 Contact 23 <lottie-player preserveAspectRatio="none" src="https://assets4.lottiefiles.com/packages/lf20_1wDQvS.json" loop></lottie-player> 24 </a> 25 </li> 26 </ul>
然而，这次我们的动画将不包含固定尺寸。它应该覆盖整个父维度，即使它被拉伸了。preserveAspectRatio="none"这就是我们赋予自定义元素 的原因 。
指定样式
默认情况下将 lottie-player 绝对定位和隐藏：
1 .menu a {
2 position: relative;
3 }
4
5 .menu a lottie-player {
6 position: absolute;
7 top: 0;
8 left: 0;
9 width: 100%;
10 height: 100%;
11 visibility: hidden;
12 }
13
14 .menu a lottie-player.visible {
15 visibility: visible;
16 }添加 JavaScript
每次我们将鼠标悬停在一个链接上时，由于 visible类和播放，它的相关动画都会出现。此外，动画将从arrayOfColors数组中随机选择颜色：
1 const links = document.querySelectorAll(".menu a");
2 const visibleClass = "visible";
3 const arrayOfColors = [
4 "chartreuse",
5 "gold",
6 "forestgreen",
7 "crimson",
8 "tomato",
9 "wheat",
10 "pink",
11 "yellow",
12 "ivory",
13 "bisque",
14 "snow",
15 "lightcyan",
16 "lightyellow",
17 "linen",
18 "mintcream",
19 "pink"
20 ];
21
22 function getRandomColor() {
23 const arrayLength = arrayOfColors.length;
24 const randomValue = Math.random() * arrayLength;
25 const roundedNumber = Math.floor(randomValue);
26 const color = arrayOfColors[roundedNumber];
27 return color;
28 }
29
30 links.forEach((link) => {
31 link.addEventListener("mouseenter", function (e) {
32 const player = this.querySelector("lottie-player");
33 player.shadowRoot.querySelector("path").style.fill = getRandomColor();
34 player.classList.add(visibleClass);
35 player.play();
36 });
37
38 link.addEventListener("mouseleave", function () {
39 const player = this.querySelector("lottie-player");
40 player.classList.remove(visibleClass);
41 player.stop();
42 });
43 });请记住，这lottie-player是一个自定义元素。要改变它的颜色，我们必须修改fill它的元素的值path。但是，我们不能使用 JavaScript 的标准遍历方法直接针对此元素。要获得此功能，我们必须首先使用ShadowRoot界面（更具体地说是其shadowRoot属性）来定位播放器的内容。
这是相关的演示：
See the Pen Exploring Hover Effects With Font Awesome Icons by Envato Tuts+ (@tutsplus) on CodePen.
10.显示文本 CSS 悬停效果
在这第十个示例中，我们将注意力转移到图标和文本动画上——我们已经在前两个演示中介绍过这些内容。
指定页面标记
同样，标记将是直截了当的；只是一个列表，其中每个链接将包含一些文本和一个 Font Awesome 图标：
1 <ul class="menu"> 2 <li> 3 <a href="#0"> 4 <span>About</span> 5 <i class="fas fa-address-card" aria-hidden="true"></i> 6 </a> 7 </li> 8 ... 9 </ul>
指定样式
默认情况下，只会显示图标。每次我们将鼠标悬停在一个链接上时，它的文本会从顶部平滑地出现，而它的图标会稍微移动到底部。值得一提的是，我们将使用 CSS Grid 来定位文本和图标，而不是传统的定位方法。
这是样式的一部分：
1 .menu {
2 display: inline-flex;
3 padding: 0 20px;
4 background: var(--white);
5 box-shadow: 0 12px 8px rgb(0 0 0 / 8%);
6 overflow: hidden;
7 }
8
9 .menu li:not(:last-child) {
10 margin-right: 70px;
11 }
12
13 .menu a {
14 position: relative;
15 display: grid;
16 padding: 40px 20px;
17 font-size: 14px;
18 font-weight: bold;
19 text-transform: uppercase;
20 }
21
22 .menu a > * {
23 grid-column: 1;
24 grid-row: 1;
25 transition: all 0.3s ease-out;
26 }
27
28 .menu a span {
29 transform: translateY(-60px);
30 }
31
32 .menu a:hover span {
33 color: black;
34 transform: translateY(-20px);
35 }
36
37 .menu a:hover i {
38 color: var(--black);
39 transform: translateY(10px);
40 }结果演示：
See the Pen Exploring Hover Effects With Font Awesome Icons by Envato Tuts+ (@tutsplus) on CodePen.
11.动画箭头 CSS 悬停效果
在第十一个示例中，我们将文本拆分为字符并按顺序为它们设置动画。我们将基于之前制作“扭曲文本效果”教程的实现。
指定页面标记
对于这种情况，我们将每个字符包装在一个span元素中，并给它一个递增的数字，表示它在其父元素中的位置：
1 <ul class="menu"> 2 <li> 3 <a href="#0"> 4 <span class="char" style="--index: 1">A</span> 5 <span class="char" style="--index: 2">b</span> 6 <span class="char" style="--index: 3">o</span> 7 <span class="char" style="--index: 4">u</span> 8 <span class="char" style="--index: 5">t</span> 9 </a> 10 </li> 11 ... 12 </ul>
当然，这里我们手动拆分文本，以便您了解效果的工作原理。但是，在更现实的场景中，JavaScript 可能会为我们做这些事情。
指定样式
每次我们将鼠标悬停在链接上时，我们都会沿 y 轴顺序翻转其字符。索引值越大，关联元素翻转的延迟越大。
以下是重要的样式：
1 .menu a {
2 position: relative;
3 display: flex;
4 padding: 10px;
5 text-transform: uppercase;
6 }
7
8 .menu .char {
9 transition: transform 0.3s ease-in-out;
10 }
11
12 .menu a:hover .char {
13 transform: scaleY(-1);
14 transition-delay: calc(0.05s * var(--index));
15 }没有什么能阻止我们将这种效果与另一种效果相结合，例如演示 3 的动画下划线。
另一种实现可能是摆脱索引值，并使用像 SASS 这样的 CSS 预处理器来生成延迟，方法是使用如下逻辑：
1 @for $i from 1 to 8 {
2 .menu a:hover .char:nth-child(#{$i}) {
3 transition-delay: $i * 0.05s;
4 }
5 }这是演示：
See the Pen Exploring Letters Animation CSS Hover Effect by Envato Tuts+ (@tutsplus) on CodePen.
12.动画字母 CSS 悬停效果
在最后一个示例中，我们将通过为其背景位置设置动画来显示箭头。
指定页面标记
我们将每个文本链接包装在一个span元素中，如下所示：
1 <ul class="menu"> 2 <li> 3 <a href="#0"> 4 <span>About</span> 5 </a> 6 </li> 7 ... 8 </ul>
指定样式
每个链接的伪元素::before都会显示箭头。以下是需要考虑的事项：
默认情况下，它将绝对定位和隐藏。
SVG 箭头的原始尺寸为 201px x 51px。在我们的例子中，我们将使箭头变小但保持纵横比。此外，我们提供它background-size: contain以确保它始终出现而不会被切断。
为了隐藏箭头，我们给它一个负数background-position-x。任何等于或高于 -80px 的值都可以。
起始样式：
1 .menu {
2 padding: 0;
3 }
4
5 .menu li + li {
6 margin-top: 20px;
7 }
8
9 .menu a {
10 position: relative;
11 display: inline-flex;
12 text-transform: uppercase;
13 }
14
15 .menu a::before {
16 content: "";
17 position: absolute;
18 left: 0;
19 top: 50%;
20 transform: translateY(-50%);
21 width: 180px;
22 height: 20px;
23 background: url(long-arrow.svg) no-repeat -85px 0 / contain;
24 transition: background-position 0.3s ease-in-out;
25 }
26
27 .menu a span {
28 transition: transform 0.3s ease-in-out;
29 }当我们将鼠标悬停在链接上时，我们会将其::before伪元素的背景位置重置回 0，并将其span85px 向右移动——比箭头的宽度稍多一点，这样它们就不会卡住：
1 .menu a:hover span {
2 transform: translateX(85px);
3 }
4
5 .menu a:hover::before {
6 background-position: 0;
7 }最后的演示：
See the Pen Exploring Arrow Animation CSS Hover Effect by Envato Tuts+ (@tutsplus) on CodePen.
结论
伙计们，另一个教程到此结束！这是一段漫长的旅程，但我希望您喜欢它并学到了一些新的东西，您将把它们包含在您的前端工具包中。
最后但并非最不重要的一点是，我已将本教程的所有演示添加到CodePen Collection中。一定要检查一下并给它一些爱！
我很想看看您最喜欢的 CSS 悬停效果。它们可以来自励志网站 CodePen，或其他地方。不要忘记与我们分享！
一如既往，非常感谢阅读！
- 从页面标记开始
- 指定样式
- 指定页面标记
- 指定样式
- 指定页面标记
- 指定样式
- 奖金！
- 指定页面标记
- 指定样式
- 指定页面标记
- 指定样式
- 指定页面标记
- 指定样式
- 添加 JavaScript
- 指定页面标记
- 指定样式
- 添加 JavaScript
- 指定页面标记
- 指定样式
- 指定页面标记
- 指定样式
- 指定页面标记
- 指定样式
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
发表评论