动手练一练，深入学习 4 个与 Hover 相关的动效案例（上）

September 04, 2022

1 min read

大家好，本篇文章小编将和大家一起学习 4 个 Hover 相关的动效案例，这 4 个案例分别是 Anchors（链接锚点）、Tooltips（提示层）、Card Content（内容卡片）、Button（按钮）相关的 Hover 效果，由于篇幅原因，本文只介绍前两个案例。

案例源码

本篇文章的两个案例，大家可以通过以下链接获取：

链接: https://pan.baidu.com/s/1nIBmEEbWcu_ZOESEZNms1Q?pwd=t81d

提取码: t81d

1、Anchors（链接锚点）

链接锚点的鼠标 Hover 效果是一个很常见的特效，看起来简单，但是相关的细节还是需要注意的，本小节我们将完成如下图所示的动效

接下来，基于上图动效，我们来分解动画需求：

去掉原有 a 标签自带的下划线链接
自定义下划线样式，鼠标 Hover 时，才显示动画效果
下划线动画效果由左到右逐渐显示，然后从左往右移动逐渐缩小（先伸展后缩小）
只要鼠标一直在文字上悬停，下划线的动画效果循环播放
链接的文字效果由暗变亮

1.1 在线演示地址

我们先通过以下链接，在线体验下效果：

https://daren-hover-animation.netlify.app/01-anchors/

1.2 、完成基础的页面布局

首先我们先完成基础的页面布局，HTML 的代码比较简单，示例代码如下：

<html>
  <head>
    <title>Interactions: Level up your CSS animation skills</title>
    <!-- The default layout, resets and and text styling -->
    <link href="stylesheets/main.css" rel="stylesheet">
    <!-- Custom styling -->
    <link href="stylesheets/links.css" rel="stylesheet">
  </head>
  <body>
    <article class="content">
      <p>... and here is some text. This text shows how <a href="https://qianduandaren.com">CSS animation</a> can help us make links be more fun and useful...</p>
    </article>
  </body>
</html>

接下来我们来完成基础的样式 main.css ，基于 normalize.css 定义默认的相关样式：

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
body {
  margin: 0;
}
article, aside, footer, header, nav, section, figcaption, figure, main {
  display: block;
}
figure {
  margin: 1em 40px;
}
[hidden] {
  display: none;
}
/* 由于篇幅，这里省略代码 */
p {
  font-size: 4.7em;
  max-width: 80%;
}

我们接下来定义链接的基础样式 links.css ，去除默认下划线链接样式，并定义 relative 样式，这样我们可以基于文本链接使用相对定位，示例代码如下：

a {
  color: #2F56B0;
  position: relative;
  text-decoration: none;
  -webkit-transition: color .4s ease-out;
  transition: color .4s ease-out;
}

最后我们自定义下划线的链接样式，我们使用 ::after 伪元素进行定义：

a::after {
  border-radius: 1em;
  border-top: .1em solid #2F56B0;
  bottom: .14em;
  content: "";
  left: 0;
  position: absolute;
  right: 100%;
  -webkit-transition: border-color .4s ease-out;
  transition: border-color .4s ease-out;
}

这里相对文本，使用了 absolute 属性，让其相对文本进行定位，距离底部 .14em 的距离，然后使用 border-radius: 1em 让下划线的左右两端更加圆滑。最后使用 left: 0; right: 100%; 让其隐藏，然后鼠标 Hover 后，让其 right: 0; 显示完整的长度。

最终完成后的效果，如下图所示：

1.3、定义关键帧动画（`keyframes`）

完成基础布局后，我们就需要定义关键帧 keyframes 动画 anchor-underline ，让下划线链接的线条，由左到右完全显示，然后由左到右逐渐缩小隐藏，关键帧的示例代码如下：

@keyframesanchor-underline {
  0%, 10% {
    left: 0;
    right: 100%;
  }
  40%, 60% {
    left: 0;
    right: 0;
  }
  90%, 100% {
    left: 100%;
    right: 0;
  }
}

然后定义鼠标经过的链接 a:hover::after 样式，调用我们的关键帧 keyframes ，示例代码如下：

a:hover::after {
  animation: anchor-underline 2s cubic-bezier(0,.5,0,1) infinite;
  border-color: #457DFB;
}

a:hover {
  color: #457DFB;
  right: 0;
  text-decoration: none;
}

使用 infinite 效果，让其鼠标在链接上悬停，不断的在伸长和缩小两个状态之间，不断循环。颜色逐渐变亮。

2、Tooltips（提示层）

在上个示例的基础上，接下来我们添加一个自定义鼠标 Hover 后的 Tooltips 提示效果，示例动画效果如下动图所示：

接下来，基于上图动效，我们来分解 ToopTip 需求：

鼠标经过时链接上方渐入一个白色透明带蓝色边框的浮层
浮层中间的最下方有个右下的箭头指向文本链接
鼠标移出文本链接，浮层渐渐淡出

2.1 、在线演示地址

我们先通过以下链接，在线体验下效果，然后在亲自动手实践完成

https://daren-hover-animation.netlify.app/02-tooltips/

2.2、简化文本下划线动效

由于主要展示提示层的效果，我们就没必要下划线的文本链接进行循环的展示伸展和缩小的动效了，links.css 文件简化后样式代码如下：

a {
  color: #2F56B0;
  display: inline-block;
  position: relative;
  text-decoration: none;
  -webkit-transition: color .4s ease-out;
  transition: color .4s ease-out;
}

a::after {
  border-radius: 1em;
  border-top: .1em solid #2F56B0;
    bottom: .14em;
  content: "";
    left: 0;
  position: absolute;
    right: 100%;
  -webkit-transition: border-color .4s ease-out,
              right .4s cubic-bezier(0,.5,0,1);
  transition: border-color 3.4s ease-out,
              right .4s cubic-bezier(0,.5,0,1);
}

a:hover {
  color: #457DFB;
  text-decoration: none;
}

a:hover::after {
  border-color: #457DFB;
  right: 0;
}

2.3、定义 ToopTip 提示层样式

接下来修改 HTML ，添加 title 属性。

<article class="content">
      <p>... and here is some text. This text shows how 
<a href="https://qianduandaren.com/" title="Learn all about animating in the browser" 
class="anchor-tooltip">CSS animation</a> 
can help us make links be more fun and useful...</p>
    </article>

接下来我们定义 title-tooltip 提示层的样式，新建 tooltips.css 样式文件，示例代码如下：

.title-tooltip {
  background: rgba(255,255,255,.9);
  border: 2px solid #457DFB;
  border-radius: .1em;
    bottom: 2em;
  font-size: .7em;
    left: calc(50% - 8em);
  opacity: 0;
  padding: .25em .5em;
  position: absolute;
  text-align: center;
  transform: translateY(-.25em);
  transition: visibility 0s .5s,
              opacity .2s ease-out,
              transform .5s cubic-bezier(0,1,.5,1),
  visibility: hidden;
  width: 16em;
  z-index: 10;
}

首先定义白色透明背景和边框样式，然后使用 left 属性将其浮层的中心位置和链接文本的中心位置保证一致。然后利用定位的属性，将其调整至文本链接的顶部。使用 visibility 属性将其隐藏，opacity 的透明度默认为0，调整 z-index 的属性，让其置顶在所有层之上。使用transform: translateY(-.25em); 将其默认位置抬高 0.25 个单位（让其有一种从上往下进入的感觉），最后调用 transition 动画属性，让提示层的渐入渐出的动画效果更将平滑。

接下来我们来定义弹出层中间下方的小三角，用于指向下方的文本链接，主要运用到用CSS如何绘制三角形的知识，示例代码如下：

.title-tooltip::after {
  border-color: #457DFB transparent;
  border-radius: 0;
  border-style: solid;
  border-width: .2em .2em 0 .2em;
  bottom: -.2em;
  content: "";
  left: calc(50% - .2em);
  position: absolute;
  width: 0;
}

2.4、定义鼠标经过的 Hover 样式

最后我们来定义鼠标链接经过链接的效果，显示提示层：

.anchor-tooltip:hover .title-tooltip {
  opacity: 1;
  transform: none;
  transition: opacity .2s ease-out,
              transform .5s cubic-bezier(0,1,.5,1),
  visibility: visible;
}

这里 transform: none; 让提示层恢复到默认的位置，开始之前我们定义了让其抬高了 0.25 个单位，这样就有一种由上往下进入的动画感觉。使用 visibility 和 opacity 属性，让其显示出来。

2.5、添加 JS 代码，显示提示层 Title 属性的文字

最后一步，我们需要使用 JS 代码，让提示层显示，我们首先要寻找所有包含 .anchor-tooltip 样式的锚点链接，然后迭代每个锚点链接，动态添加对应提示层DOM，将对应的 title 属性的文字添加至提示层，并附加上 title-tooltip 样式。

var anchors = document.querySelectorAll('.anchor-tooltip');
anchors.forEach(function(anchor) {
  var toolTipText = anchor.getAttribute('title'),
      toolTip = document.createElement('span');
  toolTip.className = 'title-tooltip';
  toolTip.innerHTML = toolTipText;
  anchor.appendChild(toolTip);
});

到这里，本小节案例就完成了。