CSS初学者悬停过渡动画三部曲

CSS不一定要写得很复杂才能实现特效。以下是三个超级简单转换的示例，它们可能只有几行代码，但可以为您的 Web 应用程序添加很多内容。

这是我们将在本教程中构建的代码

项目设置

在此项目中，我们将把过渡效果应用到具有类框的元素。该框元素内部是垂直和水平居中的文本内容。 HTML 结构非常简单：

<div class='box'>
  <p>TEXT</p>
</div>复制代码

CSS 代码也同样简单。我们将使用无衬线字体并确保 div 中的段落文本为白色。可以通过以下代码实现：

body {
  color: white;
  font-family: Helvetica, Sans-Serif;
}复制代码

另外，在 box 元素中添加以下 CSS 属性：

.box {
  width:200px;                 /* Set the Width of box          */
  height:50px;                 /* Set the Height of box         */
  background:#424242;          /* Dark Grey Background color    */
  transition:all 0.25s ease;   /* Transition settings           */

  display: flex;               /* Use Flexbox on P              */
  align-items: center;         /* Center P                      */
  justify-content: center;     /* Center P                      */
  margin: 10px;                /* Apply a margin around our Box */
}复制代码

• 不管你的 CSS 过渡属性是否熟悉，我们在这里简单介绍一下，分为三个步骤。第一步，我们需要将其应用到所有更改的属性。然后将过渡持续时间设置为 0.25 秒。最后，为了方便选择动画功能。表现为开始和结束过程比较慢，中间过渡很快。

holly高！现在准备工作已经就绪，下一步就是添加过渡效果。到目前为止，div 应该如下所示。

1. 淡入淡出效果

首先添加淡入淡出过渡。创建一个新的 div 元素并向其添加一个名为 fade 的类：

<div class='box fade'>
  <p>FADE HERE</p>
</div>复制代码

接下来我们需要做的是为该 fade 类设置悬停规则。我们需要使用 CSS 伪类选择器:hover 来实现这一点。此伪选择器对所有元素都有效，并在将鼠标悬停在元素上方时激活 CSS 声明。基于此，我们使用 :hover 选择器将 div 的透明度更改为 0.5：

.fade:hover {
  opacity: 0.5;
}复制代码

Simple。上面的 CSS 语句指定了 div 的悬停效果。目前看来是这样的。之所以能看到过渡样式是因为我们最初使用了声明transition:all 0.25s Easy;在类的命名框中。如下图，褪色效果相当不错：

2。我们来看看一些颜色

指定渐变实际上与淡入淡出渐变是相同的过程。首先，创建一个 div 元素并向其添加一个名为 color 的类。

<div class='box color'>
  <p>COLOR HERE</p>
</div>复制代码

同样，我们也会使用:hover选择器来帮助我们实现这一点，不过这次我们不会改变透明度，而是改变背景颜色：

.color:hover {
  background: #FF5722;
}复制代码

以下是实际效果：

3.一起摇摆

接下来我们来实现一个摇摆的效果。与前两个示例相比，此效果的实现要复杂一些。在此示例中，我将使用@keyframes。

@keyframes - 为您提供控制 CSS 动画序列的中间步骤的魔力。

第一件事还是老样子，你一​​定听腻了，创建一个div元素并为其添加一个名为wiggle的类：

<div class='box wiggle'>
  <p>WIGGLE WIGGLE</p>
</div>复制代码

接下来我们需要使用@keyframes制作动画。首先让我们给动画起一个名字，我们称之为“wiggle”。并在以下代码中添加抖动效果的实现：

@keyframes wiggle {
  20%  { transform: translateX(4px);  }
  40%  { transform: translateX(-4px); }
  60%  { transform: translateX(2px);  }
  80%  { transform: translateX(-1px); }
  100% { transform: translateX(0);    }
}复制代码

从上面的代码可以看出，@keyframes 使我们能够将动画拆分为单独的步骤，并精确定义每个步骤发生的情况。以百分比指定动画进度：

• 20% - div 相对于其起始位置向右移动 4px。
• 40% - 将 div 相对于其起始位置向左移动 4px。
• 60% - div 相对于其起始位置向右移动 2px。
• 80% - div 相对于其起始位置向左移动 1px。
• 100% - div 返回到其原始位置。

现在我们可以使用:hover选择器来显示摆动动画：

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}复制代码

我们将动画设置为摆动。同时我们希望动画持续1秒，并使用ease动画效果。

最后，指定每次鼠标光标悬停时触发的动画。

下图是最终的动画效果：

作者：Jelly tfzwgd
链接：https://juejin.im/post/5cc50612e51d456e660d45377版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。