从头开始vue创建项目_如何从头开始创建7种不同CSS悬停效果-优快云博客

从头开始vue创建项目

在今天的教程中，我们将创建7种不同CSS悬停效果。我们将沿途学习负载，包括如何为字体图标，边框和SVG路径设置动画。您将能够将这些CSS悬停效果应用于各种情况。让我们潜入吧！

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

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

1.揭示图标CSS悬停效果

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

从页面标记开始

我们将从一个普通的无序列表开始，它将代表一个典型的页面菜单。每个菜单链接将包括两个span元素。第一个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容器：

.menu {
  display: flex;
  justify-content: center;
}

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

每个项目的第一个span周围都会有一些填充：

.menu a span:first-child {
  display: inline-block;
  padding: 10px;
}

然后，默认情况下将绝对定位并隐藏第二个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演示，总结了上述情况：

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伪元素将覆盖整个链接的尺寸，但默认情况下也会隐藏。其内容将保存在相关的data-icon属性中的Font Awesome图标：

: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演示：

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演示：

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;
}

当我们将鼠标悬停在链接上时，顺时针旋转后，其跨度将顺序可见。为此，我们将控制第二，第三和第四跨度何时可见：

: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演示，它为我们带来了以下效果：

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值进行硬编码。

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

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

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

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

这是演示：

7.指向SVG箭头悬停效果

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

这是供您反向工程的演示：

结论

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

最后但并非最不重要的一点是，我已将本教程的所有演示都添加到CodePen集合中。一定要检查出来，给它一些爱！

我希望看到您最喜欢CSS悬停效果。他们可以来自鼓舞人心的网站CodePen或其他地方。不要忘记在评论部分与我们分享它们。

与往常一样，非常感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-create-different-css-hover-effects-from-scratch--cms-34222

从头开始vue创建项目