应用CSS完成一个悬停过渡动画的项目（超级简略）

CSS不必然要写得多么复杂才能实现非凡结果。如下就是三个超级简便的过渡的例子，大概只是几行代码，但是增加到Web利用程序中，却会让它增色不少。

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

项目设定

在这个项目中，我们将把过渡结果利用到一个class为box的元素上面。这个box元素内部是垂直和水平居中的文字内容。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的过渡属性熟知与否，我们在这里都来简要介绍一下，一共分为三步。.第一步，我们需要将它利用到all转变的属性。接下来，设定过渡时长为0.25秒。最后，将动画函数选为ease。ease的展现状态就是起止历程比力迟缓，中心过渡快速。

holly high! 当前预备工作都已经就绪，接下来就是增加过渡结果了。到当前为止，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;
}

简便吧。上面这句CSS声明就为div指定了一个悬停结果。如下就是当前它展示的模样。而你之所以能够看到过渡样式，是由于我们一开端在名为box的类中使用了transition:all 0.25s ease;的声明。看下面，是不是一个还不错的褪色结果：

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的动画了：

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}

我们将animation设定成wiggle。同时但愿动画连续1秒的时长，采纳ease的动画结果。

最后，就是指定动画在每次鼠标指针悬停的时候触发一次。

下图就是终究的动画结果：

以上就是利用CSS完成一个悬停过渡动画的项目（超级简便）的具体内容，更多请关注百分百源码网其它相关文章！